josdejong/jsoneditor

Remove Data URLs from code

Open

#1,418 opened on 2022年2月5日

GitHub で見る
 (5 comments) (0 reactions) (0 assignees)JavaScript (10,781 stars) (2,034 forks)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
Issue 種別
refactor
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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:`.