Twtich 扩展 - 拒绝连接到外部 API
我正在开发一个 twitch 扩展，并且我已经在外部创建了一个 API 供应用程序连接。我已经遇到这个错误大约两天了，但我似乎找不到解决方案。
Refused to connect to 'https://community.shadowmont.com/oauth/GetUserProfileDetails' because it violates the following Content Security Policy directive: "connect-src 'self' https://lgqt8zmxwk4v3ubxobrmy8r2f49uc1.ext-twitch.tv https://api.twitch.tv wss://pubsub-edge.twitch.tv https://www.google-analytics.com https://stats.g.doubleclick.net".
前端是 JavaScript / HTML，它尝试连接到 MVC5 API。我在谷歌上搜索了答案，大多数帖子都说要在标题中添加元标记，但无论我尝试什么，这都不能解决问题。我现在正处于一个不知道该怎么办的时刻。
我发现的一篇帖子告诉我添加
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">
但这没有用。
I am working on a twitch extension and I have created an API externally for the app to connect to. I've had this error now for roughly two days and I can't seem to find a solution to it.
Refused to connect to 'https://community.shadowmont.com/oauth/GetUserProfileDetails' because it violates the following Content Security Policy directive: "connect-src 'self' https://lgqt8zmxwk4v3ubxobrmy8r2f49uc1.ext-twitch.tv https://api.twitch.tv wss://pubsub-edge.twitch.tv https://www.google-analytics.com https://stats.g.doubleclick.net".
The front end is JavaScript / HTML and it's trying to connect to an MVC5 API. I've Googled around for the answer and most posts say to add a meta-tag to the header, but no matter what I try, this does not solve the issue. I'm at a point now where I am not sure what to do.
One of the posts I found told me to add
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">
But this didn't work.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要在扩展程序的开发控制台的“URL 获取域的白名单”中添加连接到的任何外部域。外部媒体或图像也是如此。
扩展利用 CSP 或内容安全策略来控制/限制/保护扩展免于连接到意外的事物。
Twitch 不支持元标记版本，因为它不太安全。出于安全原因，它由 Twitch Extensions CDN 服务器标头覆盖/设置。
要填充这些参数，
URL 获取域白名单。根据需要添加 URL。
进一步阅读
对于在本地测试下进行测试，有一个 NodeJS 模块，您可以按原样使用或将相关逻辑复制到您自己的本地测试系统中，这将使您不必过多地跳转到托管测试/本地测试。
You need to add any External Domains you connect to in the "Allowlist for URL Fetching Domains" in the Dev Console for your Extension. The same goes for External Media or Images.
Extensions utilise a CSP or Content Security Policy to control/limit/protect Extensions from connecting to unexpected things.
Twitch DOES NOT support the meta tag version of this, as it is less secure. It is overriden/set by the Twitch Extensions CDN Server Headers for security reasons.
To populate these parameters,
Allowlist for URL Fetching Domainsat the bottom.Add in the URL's as needed.
Further reading
For testing under local test there is this NodeJS Module which you can use as is or copy the relevant logic into your own local test system which will save you having to jump to hosted test/local test too much.