Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Content security policy issue :(

See original GitHub issue

This is a very vital library and saves a ton of development effort. However, i am in a dire situation . The content security policy blocks from loading the application in QA and PROD environment. We get the below error

Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFKADAAQAAAABAAAAFAAAAACy3fD9AAAAq0lEQVQ4EWNgGAUDGQLpQMtbqOUAFaBBJ4DYhxoGMgINmQ/E06hhGMiMECA+CsQyIA6lQARowAEgTgBiooEBUCUrDtUdQPHlQMyCQx6r8CagaBsWGRug2Ckg1sYih1fICCh7EojDkFRxAtlbgLgYSYwkZjRQNShZwFxTAGSDDAQZTDYAeRtkiCkQg1wM8jJFAOSalUAMCjdsYUqW4ZJAXflALECW7lFNZIUAADyGE54jYsm6AAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "default-src 'self' *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Expected Behavior

The CSP should not block the images and other inline styles

Current Behavior

My server.js file is as follows

app.use(function(req, res, next) { res.set(“Content-Security-Policy”, “default-src ‘self’ *.”) res.set(“img-src ‘self’ data:”) next(); });

The CSP blocks the following code to get executed.

toPng(ref.current) .then((dataUrl) => { //usage of dataUrl here }) .catch((err) => { console.log(err) }) }, [ref])

Possible Solution

Please suggest a possible solution.

I have read about the content security policy and found this code img-src ‘self’; This means that images can be loaded from the same origin (via the ‘self’ source list value), or via URLs starting with:

But my situation is different. I dont get a URL in my console log. It gives a long url as mentioned above. Can you please provide me the URL from where this data is getting loaded.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

blueeDevelopercommented, Dec 17, 2021

@zerubeus - unfortunately, there will be a lot of security concerns in ones private company while using the 3rd party libraries. We have removed using html-to-image library and had to work on building a similar feature ourselves.

zerubeuscommented, Dec 4, 2021

We have the same issue, @blueeDeveloper any updates on this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Content-Security-Policy - HTTP - MDN Web Docs
The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a ...
Read more >
What is Content Security Policy (CSP) | Header Examples
A Content Protection Policy (CSP) is a security standard that provides an additional layer of protection from cross-site scripting (XSS), clickjacking, ...
Read more >
Content-Security-Policy Header CSP Reference & Examples
Content -Security-Policy is the name of a HTTP response header that modern browsers use to enhance the security of the document (or web...
Read more >
Content Security Policy - Wikipedia
Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection ...
Read more >
Content Security Policy - OWASP Cheat Sheet Series
By injecting the Content-Security-Policy (CSP) headers from the server, the browser is aware and capable of protecting the user from dynamic calls that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found