search

neaumusic / selection-highlighter

browser highlighter for code analysis
BSD 3-Clause "New" or "Revised" License
82 stars 15 forks source link

Canvas interferes with layout when CSP specified #61

Open karlhorky opened 1 year ago

karlhorky commented 1 year ago

Hi @neaumusic, thanks again for this extension! šŸ™Œ

Just wanted to quickly report a problem that I have seen with certain websites which specify a CSP (Content Security Policy), such as GitHub avatar URLs. The inline styles for the canvas element are prevented to load because of the CSP directives. The inline styles are being added in addStyleElement():

https://github.com/neaumusic/selection-highlighter/blob/d742eab49fb4fb7ddc86048005984aec1e086431/src/chrome_extension/content_script/utils.ts#L7-L31

The height="868" and width="32" attributes on the canvas, when not applied with the styles cause a large empty space at the top, which pushes other content down - in the GitHub avatar example, it appears as if the image is having trouble loading (really, it's just further down on the page, if the user scrolls):

Demo URL: https://avatars.githubusercontent.com/u/3423750?v=4

https://github.com/neaumusic/selection-highlighter/assets/1935696/dbd1c917-213b-4ff5-b7c8-17b8dba27d74

Maybe the canvas can be hidden in other ways for websites specifying a CSP (or if there are other problems with the CSP, maybe the CSP could be overridden with a nonce from the extension, randomly generated on each page load)

neaumusic commented 1 year ago

hmmm, so that error looks unrelated the extension (you can follow the link / reveal source / in sidebar), but I think you might be on to something about the canvas styling