Question

是否有禁用将外部内容加载到iFrame中的功能？想象一下，有一个像这样定义的iframe：

this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
     console.log(evt.url);
    }
 })

可以通过sanbox属性中的 allow-scripts 禁用JS的加载，但是有什么方法可以禁用外部CSS（和其他外部内容）的加载？

如果没有，那么是否可以替换“呈现”的html代码（例如，用JS）？

Answer 1

是的，您可以通过使用 src 而不是 srcdoc 并以 data:text/html;charset=UTF-8, 为前缀来实现它。

在您的示例中：

<iframe src="data:text/html;charset=UTF-8,<html> <head> <title>Example Page!</title> <link rel='stylesheet' type='text/css' href='http://example.com/mystyle.css'> </head> <body> <p class='main'>Here goes the text. </p><script src='http://example.com/js/superscript.js'> </body> </html>">
</iframe>

Answer 2

我已经执行了以下功能，以从iframe中显示的电子邮件中删除加载某些资产：

  const replaced = []
  const h = html
    .replace(/url\s*\(([\s\S]+?)\)/g, (m,url) => {
      url = url.trim()
      try {
        url = decodeURIComponent(url)
      } catch (err) {/**/}
      replaced.push(url)
      return 'url()'
    })
    .replace(/[\s'"](?:src|srcset|background)?\s*=\s*(['"])([^\1]*?)\1/g, (m,q,src) => {
      if (!src) return m // empty
      replaced.push(src)
      return ''
    })
    .replace(/<\s*link[^>]*?([\s'"]href\s*=\s*(['"])([^\2]*?)\2)/g, (m,attr,q,src) => {
      if (!src) return // empty
      replaced.push(src)
      return m.replace(attr, '')
    })

有趣的是，<img alt="test"src="http://src.com/img.jpg">是有效的，并且将由chrome显示，因此在实际上不需要属性之前可以使用空格，因此我编辑了此答案以解决该问题……

这可能并不完美，但是您可以在添加更多属性时对其进行调整...

禁用iFrame内部的外部内容加载

2 个答案: