Angular本地项目添加特定src后script标签type变为text/plain问题咨询

现象详情 #

本地运行Angular项目（源码无法共享）时，在控制台执行以下代码：

const tag = document.createElement("script");
tag.id = "iframe_api_script";
tag.type = "text/javascript";
tag.src = "https://www.youtube.com/iframe_api";

生成的script标签中，type属性被自动改为text/plain，最终标签为：

<script id="iframe_api_script" type="text/plain" src="https://www.youtube.com/iframe_api"></script>

注：设置src属性之前，type始终保持text/javascript。

跨浏览器测试（Chrome、Chrome隐身模式、Edge、Firefox，后两者无任何扩展）均出现此问题，但在其他网站执行相同代码时，type能正常保留为text/javascript。

额外反常点：

• 项目部署到服务器后（代码与本地完全一致），type显示正常；
• 同事拉取相同代码分支本地运行，未出现此问题。

补充测试数据 #

修改src值后，type的变化情况：

• https://www.youtube.com/iframe_api234 → text/plain
• https://www.youtube.com → text/plain
• https://www.youtube2.com → text/javascript
• https://www.youtube.com/hello → text/javascript
• https://www.youtube.com/iframe → text/plain
• https://www.google.com/iframe → text/javascript

可能的原因 #

1. 系统级代理/安全工具拦截：部分杀毒软件、防火墙或网络监控工具，可能会针对youtube.com域名下包含iframe关键词的资源，修改script标签的type属性来限制执行。这类工具仅在本地环境生效，服务器和同事环境未部署所以不受影响。
2. Angular本地开发服务的自定义配置：检查angular.json或webpack配置文件，是否存在针对外部脚本的处理逻辑。比如本地开发环境的插件（安全优化类），对特定域名/路径的脚本做了属性篡改。
3. 本地DNS/hosts劫持：如果本地hosts文件将youtube.com指向了代理或本地地址，中间层可能会篡改请求对应的标签属性。
4. 本地环境的CSP特殊规则：检查页面的Content Security Policy设置，是否对youtube.com的脚本有特殊限制，导致浏览器自动修改type属性（虽然常规CSP是直接阻止加载，但不排除特殊规则的影响）。

内容的提问来源于stack exchange，提问作者Arcord