search

eclipse-cdt-cloud / vscode-trace-extension

Trace viewer extension for Eclipse Theia applications and VSCode compatible applications, that uses the Trace Server Protocol (TSP)
MIT License
7 stars 21 forks source link

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'self' #251

Closed bhufmann closed 3 months ago

bhufmann commented 3 months ago

When opening a trace the console log show errors as below. Some when using pixijs and chartjs.

For example in pixi.js:

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'self' <URL>".

trace_panel.js:63685 Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABgoAAsAAAAALEgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAmMAAAR2YfRkQU9TLzIAAANsAAAAQQAAAFZWUFLwY21hcAAAA7AAAAIMAAAFnGSNxkJnbHlmAAAFvAAADpIAABo4y6JNTGhlYWQAABRQAAAANAAAADZ2zcSBaGhlYQAAFIQAAAAaAAAAJAfQBDFobXR4AAAUoAAAABoAAAEgs7L//WxvY2EAABS8AAAAawAAAJJHu0GKbWF4cAAAFSgAAAAfAAAAIAFeAKpuYW1lAAAVSAAAATUAAAJG0OP3eXBvc3QAABaAAAABqAAAAm9qOX49eJx9lM1SE1EQhc8wAYFEoDQqRkRQ/IvKMD8Zk/CTkJBoWS5cWJYLN1hWWVZRrngOH8AnYOkT+AAufAIfwIVL15ZfdwaDLMitTO50n+4+fW7fKJA...IE6AE8vPdwvHu4a2201tFv/T/22KBNQkqHLj026TNgixOcZJshpxhxmjOcZYdznOcCF7nEZa5wlWtc5wY3ucVt7nCXe9znAQ95xGMynvCUZ4x5zgte8orXvOEt73jPBz7yic/s8oWvfOM7P/jJL36zx5/WQBSFU4UI2pqOcM4ufFt42ZHCSFWmciZcGMqZkvsTu8wOgcp3jgRtchWUq7QRQY2O5Mb8q9yStrQuq3UkrhtJUxnfl9YEJ2RQeSJtvUqls963pZ+n8WXjJFdepmoZDXQPczbuqWUt4qx8U61U5kvhZ+2IOlNdxvHpVDsfksLpOi2cbeokFoSkVNPQKbWJPrqlFbk2Ra8SS13pA5VUyjS96HvNjDVqYGzIRFnahcrTOjZQ7VqbtNZzG4YufrfZpAnBmsxOp9vHBZM6XcxC4sVc9X0Vu2S5XZjeGkZDIW5gFJxSx1fWa8zaIIIChyKgsRgWeCQlM/aZsIwnzqloqFkxZ8pBq/UXq/Gj5g==' because it violates the following Content Security Policy directive: "font-src 'self' https://*.vscode-cdn.net".

TextMetrics.measureText @ trace_panel.js:63685

Another instance for Chart.js:

Chart.js:7633 Refused to load the image 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+' because it violates the following Content Security Policy directive: "img-src 'self' https://*.vscode-cdn.net https:".

watchForRender @ Chart.js:7633
addResizeListener @ Chart.js:7677
addEventListener @ Chart.js:7823
bindEvents @ Chart.js:10115
initialize @ Chart.js:9388
construct @ Chart.js:9373
Chart @ Chart.js:9311
renderChart @ index.js:290
componentDidMount @ index.js:98
commitLayoutEffectOnFiber @ react-dom.development.js:23310
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
abstract-xy-output-component.tsx:254 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
componentDidUpdate @ abstract-xy-output-component.tsx:254
commitLayoutEffectOnFiber @ react-dom.development.js:23338
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
bhufmann commented 3 months ago

The CSP setting is done when creating the HTML for each webview, see image for the trace explorer:

image

bhufmann commented 3 months ago

Some related information that could help solve the problem:

marcdumais-work commented 3 months ago

Another interesting piece of information: How MS configures different levels of CSP for its built-in MarkDown extension (the user can pick the level, from "insecure" to "strict"): https://github.com/microsoft/vscode/blob/6aca75d9d09f7d9d32c18e58c836067f2d420495/extensions/markdown-language-features/src/preview/documentRenderer.ts#L234-L246