DEV Community

Gyana Ranjan panda
Gyana Ranjan panda

Posted on

Content Security Policy Nightmare

How a simple package can give you sleepless night

Must be thinking about how is this possible? let me give you some details first:-

Bug Details

Looking Scary right🥶, basically i am working on a chrome extension and everything going smooth and one day the devil arise.

The extension was basically a search enhancer Felvin :-
Image description
Like above example it provides lot of dev utilities around 72(csv to json,image crop,code reference ,corn parser,image compressor) all in your search bar.
Link:Chrome Store

So one day a new version was rolled out then suddenly it throws the above error. So figuring out among 72 apps which causes this.

Those who not aware about CSP policies by google. for them
The content security policy for Chrome Apps restricts you from doing the following:

  • You can't use inline scripting and event handlers like onClick

  • Can't use eval() and new Function()

  • You can't reference any external resources in any of your app files (except for video and audio resources).

So basically here second point was problem ,we can solve the problem by allowing the unsafe-eval in CSP policy but i was not optimal solution.

Ever heard about git bisect 🤔,it works on principle of binary search .In the same way i check all the packages and Bingo found the culprits and finally all sleepless night come to an end.

Learnings:-

  • while solving the blog i didnot purpose any hypothesis and write down any causes .so it was same as hitting the bush.

  • First i suspect may be webpack config causing this error,try to change its configurations as suggested in github issues and stackoverflow

So Debugging method can be summarized as:

Image description

Top comments (0)