josdejong/jsoneditor

Remove Data URLs from code

Open

#1,418 创建于 2022年2月5日

在 GitHub 查看
 (5 评论) (0 反应) (0 负责人)JavaScript (10,781 star) (2,034 fork)batch import
featurehelp wanted

描述

In this piece of code a data URL is used:

https://github.com/josdejong/jsoneditor/blob/e69a835f721bab6824b65f3d13717a20ff7d81f7/src/js/ace/theme-jsoneditor.js#L138

This requires applications using Content Security Policy directives with full restrictions to allow data: as described here and here.

https://security.stackexchange.com/questions/94993/is-including-the-data-scheme-in-your-content-security-policy-safe discusses if data: is safe or not. One answer suggests it has never been proven to be unsafe, even though multiple articles mentions it is.

To be better safe than sorry many applications forbid data: and only allow the 'self' as the CSP source.

Would it be possible to put the SVG in an external file and instead bundle it that way? I.e. as a real URL to the .svg. It's also nice in the sense that users can actually open the SVG in the src in this repo to see what it looks like 😄

贡献者指南

技术栈
javascripthtmlcss
领域
frontendsecurity
议题类型
refactor
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
active
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
JavaScriptbuild system basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
85
研究方向
The main file to modify is `src/js/ace/theme jsoneditor.js` (line 138). Create a separate SVG file (e.g., `src/img/jsoneditor logo.svg`) with the content from the data URL. Then, import the SVG file in the theme file and update the reference to use the imported path instead of the data URL. Ensure the SVG is included in the build output (e.g., via webpack file loader or asset modules) and verify that the project's CSP no longer requires `data:`.