加载后是否可以读取脚本或图像标签的内容？答案

【问题标题】：Can contents of a script or image tag be read after it is loaded?加载后是否可以读取脚本或图像标签的内容？
【发布时间】：2023-03-10 03:17:01
【问题描述】：

假设我的 html 中有一个 <script> 标记，它会从它的源代码加载一些脚本。是否可以以某种方式将此源读取为字符串（无需直接对 src 执行相同的请求）？关键是要弄清楚是否存在需要解决的漏洞，例如脚本源可以是 3d 方 API，浏览器很乐意发送身份验证 cookie。

我认为这是不可能的，必须严格禁止，否则它可以很容易地被用于 CSRF 攻击以窃取敏感数据，但只是想确定一下。

附：这同样适用于例如<img>标签等

【问题讨论】：

如果是<script>code</script>标签你可以使用.textContent，但我不认为有办法访问外部JS文件的内容。
如果您的动机是确保脚本未被修改，那么子资源完整性可能是更直接地处理问题的一种选择：developer.mozilla.org/en-US/docs/Web/Security/…

标签： javascript html security

【解决方案1】：

这可以通过XMLHttpRequest：

window.addEventListener('DOMContentLoaded', function() {
    var xhr = new XMLHttpRequest();
    var url = 'http://localhost:8081/myscript.js';

    xhr.open('GET', url);

    xhr.onreadystatechange = function(response) {
        if(xhr.readyState === 4 && xhr.status === 200) {
            console.log(response.currentTarget.responseText);
        }
    };

    xhr.send();
});

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

【讨论】：

嗯，这会起作用，但我的意思是从另一台服务器加载数据（或确定它是否是一个漏洞），以便 CORS 阻止您的解决方案，我将编辑我的答案有点，不够清楚。

【解决方案2】：

您通常无法通过浏览器执行此操作。同源策略防止浏览器从不同的源（域）读取内容（脚本或img）的内容。

即使在可以读取源代码（使用 CORS）的情况下，也无法在浏览器解析并执行脚本之前执行此操作。如果这就是您所追求的，那么您将使用子资源完整性将允许的脚本列入白名单。

【讨论】：

感谢您的回答，不，我不需要执行脚本，但尝试确定如果您尝试执行 3d 派对 api 是否可能发生攻击，例如返回 json 而不是真正的脚本，然后读取它。我虽然那个 SOP 会阻止它，它似乎就像你说的那样
不客气。一种想法可能是将第 3 方脚本的 URL 发送到外部服务，该服务可以进行分析并返回响应（使用 CORS，以便您可以阅读它）。我不知道这是否与您的用例有关，但可能值得调查。