我可以要求浏览器不在元素中运行 <script> 吗？

Question

是否可以告诉浏览器不要从 HTML 文档的特定部分运行 JavaScript？

喜欢：

<div script="false"> ...

它可以用作附加的安全功能。我想要的所有脚本都加载到文档的特定部分。文档的其他部分不应有脚本，如果有，则不应运行。

Answer 1

是的，你可以 :-) 答案是：Content Security Policy (CSP)。

Most modern browsers support this flag，它告诉浏览器只从受信任的外部文件加载 JavaScript 代码并禁止所有内部 JavaScript 代码！唯一的缺点是，您不能在整个页面中使用任何内联 JavaScript（不仅仅是单个 <div>）。虽然可以通过动态包含具有不同安全策略的外部文件中的 div 来解决此问题，但我不确定。

但是，如果您可以更改您的网站以从外部 JavaScript 文件加载所有 JavaScript，那么您可以使用此标头完全禁用内联 JavaScript！

这是一个很好的示例教程：HTML5Rocks Tutorial

如果您可以将服务器配置为发送此 HTTP-Header 标志，世界将会变得更美好！

Answer 2

您可以使用beforescriptexecute 事件阻止<script> 加载的JavaScript：

<script>
  // Run this as early as possible, it isn't retroactive
  window.addEventListener('beforescriptexecute', function(e) {
    var el = e.target;
    while(el = el.parentElement)
      if(el.hasAttribute('data-no-js'))
        return e.preventDefault(); // Block script
  }, true);
</script>

<script>console.log('Allowed. Console is expected to show this');</script>
<div data-no-js>
  <script>console.log('Blocked. Console is expected to NOT show this');</script>
</div>

请注意，beforescriptexecute 是在 HTML 5.0 中定义的，但在 HTML 5.1 中已被删除。 Firefox 是唯一实现它的主流浏览器。

如果您在页面中插入一堆不受信任的 HTML，请注意在该元素内阻止脚本不会提供更多安全性，因为不受信任的 HTML 可以关闭沙盒元素，因此脚本将被放置在外部并且运行。

这不会阻止<img onerror="javascript:alert('foo')" src="//" />之类的内容。

Answer 3

有趣的问题，我认为这是不可能的。但即使是这样，听起来也像是一个黑客攻击。

如果该 div 的内容不受信任，那么您需要先在服务器端对数据进行转义，然后才能在 HTTP 响应中发送数据并在浏览器中呈现。

如果您只想删除 <script> 标记并允许其他 html 标记，则只需将它们从内容中剥离并保留其余部分。

研究 XSS 预防。

https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet

Answer 4

JavaScript 是“内联”执行的，即按照它在 DOM 中出现的顺序（如果不是这种情况，你永远无法确定在不同脚本中定义的某些变量在使用时是可见的第一次）。

这意味着理论上你可以在页面的开头有一个脚本（即第一个<script>元素），它会查看DOM并删除<div>中的所有<script>元素和事件处理程序。

但实际情况更复杂：DOM 和脚本加载是异步发生的。这意味着浏览器只保证脚本可以看到 DOM 的 before 部分（即我们示例中的标头）。没有任何保证（这与document.write()有关）。所以你可能会看到下一个脚本标签，也可能看不到。

您可以锁定文档的onload 事件 - 这将确保您获得整个 DOM - 但此时恶意代码可能已经执行。当其他脚本操作 DOM 并在那里添加脚本时，情况会变得更糟。因此，您还必须检查 DOM 的每次更改。

所以@cowls 解决方案（在服务器上过滤）是唯一可以在所有情况下工作的解决方案。

Answer 5

如果您希望在浏览器中显示 JavaScript 代码：

使用 JavaScript 和 HTML，您必须使用 HTML entities 来显示 JavaScript 代码并避免执行此代码。在这里您可以找到 HTML 实体列表：

• http://dev.w3.org/html5/html-author/charref
• http://www.w3schools.com/html/html_entities.asp

如果您使用服务器端脚本语言（PHP、ASP.NET 等），很可能有一个函数可以转义字符串并将特殊字符转换为 HTML 实体。在 PHP 中，您将使用“htmlspecialchars()”或“htmlentities()”。后者涵盖了所有的 HTML 字符。

如果您希望以一种不错的方式显示您的 JavaScript 代码，请尝试以下代码荧光笔：

• http://prismjs.com/
• http://alexgorbatchev.com/SyntaxHighlighter/
• https://highlightjs.org/

Answer 6

我有一个理论：

• 将文档的特定部分包装在 noscript 标记内。
• 使用 DOM 函数丢弃 noscript 标记内的所有 script 标记，然后解开其内容。

概念证明示例：

window.onload = function() {
    var noscripts = /* _live_ list */ document.getElementsByTagName("noscript"),
        memorydiv = document.createElement("div"),
        scripts = /* _live_ list */ memorydiv.getElementsByTagName("script"),
        i,
        j;
    for (i = noscripts.length - 1; i >= 0; --i) {
        memorydiv.innerHTML = noscripts[i].textContent || noscripts[i].innerText;
        for (j = scripts.length - 1; j >= 0; --j) {
            memorydiv.removeChild(scripts[j]);
        }
        while (memorydiv.firstChild) {
            noscripts[i].parentNode.insertBefore(memorydiv.firstChild, noscripts[i]);
        }
        noscripts[i].parentNode.removeChild(noscripts[i]);
    }
};

body { font: medium/1.5 monospace; }
p, h1 { margin: 0; }

<h1>Sample Content</h1>
<p>1. This paragraph is embedded in HTML</p>
<script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
<p>3. This paragraph is embedded in HTML</p>
<h1>Sample Content in No-JavaScript Zone</h1>
<noscript>
    <p>1. This paragraph is embedded in HTML</p>
    <script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
    <p>3. This paragraph is embedded in HTML</p>
</noscript>
<noscript>
    <p>1. This paragraph is embedded in HTML</p>
    <script>document.write('<p style="color: red;">2. This paragraph is generated by JavaScript</p>');</script>
    <p>3. This paragraph is embedded in HTML</p>
</noscript>

Answer 7

如果您想稍后重新启用脚本标签，我的解决方案是破坏浏览器环境，以便任何运行的脚本都会在相当早的时候抛出错误。但是，它并不完全可靠，因此您不能将其用作安全功能。

如果您尝试访问全局属性，Chrome 会抛出异常。

setTimeout("Math.random()")
// => VM116:25 Uncaught Error: JavaScript Execution Inhibited  

我将覆盖 window 上的所有可重写属性，但您也可以扩展它以破坏其他功能。

window.allowJSExecution = inhibitJavaScriptExecution();
function inhibitJavaScriptExecution(){

    var windowProperties = {};
    var Object = window.Object
    var console = window.console
    var Error = window.Error

    function getPropertyDescriptor(object, propertyName){
        var descriptor = Object.getOwnPropertyDescriptor(object, propertyName);
        if (!descriptor) {
            return getPropertyDescriptor(Object.getPrototypeOf(object), propertyName);
        }
        return descriptor;
    }

    for (var propName in window){
        try {
            windowProperties[propName] = getPropertyDescriptor(window, propName)
            Object.defineProperty(window, propName, {
                get: function(){
                    throw Error("JavaScript Execution Inhibited")
                },
                set: function(){
                    throw Error("JavaScript Execution Inhibited")
                },
                configurable: true
            })
        } catch (err) {}
    }

    return function allowJSExecution(){
        for (var propName in window){
            if (!(propName in windowProperties)) {
                delete windowProperties[propName]
            }
        }

        for (var propName in windowProperties){
            try {
                Object.defineProperty(window, propName, windowProperties[propName])
            } catch (err) {}
        }
    }
}