How to move all inline scripts and styles into external files?

Hello,
I have a WordPress website and have below problem:

How to move all inline scripts and styles into external files?

Thank you.

Are you using a theme you’ve developed yourself or an off-the-shelf theme?

If it’s a free theme or one you have bought, then that could be problematic.

Sometimes it’s not practical to move all CSS and JS to external files, and for your JS, if you use inline elements such as onclick, you’ll need to change these to use event listeners before you can save them as external files.

1 Like

It is a free theme.
No way to solve it?

The easiest option would be to add unsafe-inline as a source to the Content Security Policy Header as suggested in the message you’ve got.

2 Likes

I did, but https://securityheaders.com/ doesn’t accept it :frowning:

It’s more important that your website works than securityheaders likes it. Besides, Wordpress is not the most secure platform in any case.

1 Like

Thank you.
I checked my website with some security tools.
What is your opinion to solve that problem?

You can only do so much. As I see it you have 3 choices:

  1. Accept the level of security you have.

  2. See if you can find a theme that does not use inline JS and CSS (tricky as you probably won’t know till you’ve downloaded it and tried it).

  3. Rewrite your site in vanilla HTML/CSS/JS/PHP (probably not practical as you’ve already invested time in your WP site).

There may be other options but I can’t think of them right now.

Try saving all external CSS and JavaScript files to your server and change all links to load the newly copied files.

That’s going to require creating a child theme and rewriting any JS inline events using event listeners. No mean feat.