The EASIEST Way to Create Magento CSP Whitelists

CSP whitelist files allow your Magento site to make requests to external sites, but they can be a big pain to set up. So I created a really simple solution that creates these files for you automatically. But before we get to it, it makes sense to first talk about CSP so you can understand what it is and why we don't just disable it. A content security policy, or CSP for short, is one of the most effective ways to prevent cross site scripting attacks. These XSS attacks happen when a malicious actor finds a way to inject their code into your website. The injected code can do all sorts of nasty things like steal customer data or skim credit card data during the checkout process, which makes it an extremely huge security concern, especially for e commerce platforms like Magento. It's like having a security guard at the door of your website saying sorry, your name's not on the list, you're not allowed in. But implementing CSP can be a huge hassle to set up, some Magento developers have resorted to completely disabling the built in Magento CSP module, but that not only puts your store at risk of losing PCI compliance, but it can also open up little back doors for hackers to let themselves into your website. And while Google did recently release a white paper about the ineffectiveness of CSP whitelists, which is what Magento primarily uses, implementing it is still very important. Because security works best in layers, each additional layer of security increases its effectiveness, and continuing to have a CSP whitelist in place is no exception. Creating a CSP whitelist in Magento is actually pretty simple and straightforward. In my Magento JavaScript Development Fundamentals course, which I created a few years back, I outlined exactly how to create one of these files. In about two minutes. I made this lesson a free preview, so be sure to check it out in the description below. Creating a CSP whitelist in Magento involves creating a file in your module at etc cspwhitelist xml. Then you'll add a root cspwaitelist node and then add any number of policy values to this list. Here we are telling Magento to create an HTTP header for a CSP for a script source tag. This will allow HTTP requests made to this jsdeliver CDN to succeed. Without the CSP policy in place, any request to cdn.jsdeliver.net will fail. Now that you generally know what a CSP is and how to create a related whitelist file, let's get to that solution that I made. But before you see it? You gotta tap that like button. Go ahead, do it. I'll wait. Okay, so creating these CSPWhitelist XML files is fairly easy, but you know what isn't? When your Magento site has modules installed and even more customizations involving external sources. If this is the case, you'll wind up getting CSP errors all over the place. While there is a little hack to make the Magento checkout only report CSP errors rather than fully enforce them, See the related blog that I wrote on how to do this with the on duplicate key update command and why we even need to do this. But that's really only a temporary workaround until you can get all of these sources in your whitelist. A few solutions were floated around to attempt to solve this problem, but I thought there were still too many manual steps involved, so I created my own solution called the Magento CSP Whitelist Generator, which is a simple Google Chrome plugin. Okay, after installing this plugin, I'd recommend to go ahead and pin it to your toolbar so it's easy to use and then browse over to your Magento homepage and go ahead and click the Scan Current Page button. The plugin will actually listen for external requests, and any network requests that were made from your Magento store will be saved in a list. After scanning the page, go ahead and click the checkbox next to the related option for the current page, which for this case is homepage. Next let's go ahead and head over to the Category page and then again go to the CSP icon and click Scan Current Page. And then after that's complete, go ahead and check the checkbox next to Category page. We can do the same thing for all of these other pages, and it even works for other pages not in this list, like non standard pages. You may have modified or custom pages that you've built. Just visit all of them and click the Scan Current Page button and it will capture all of those network requests made from your store. For pages like the Product page, you only need to scan a single product page since they all share the same layout. When all of these boxes are checked off, or if you don't want to scan them, you could just check off these boxes. This complete and Generate button will become available if you go ahead and Click it. A CSPWhitelist XML file will then be downloaded. In that download will be a complete CSP whitelist file that you can then copy over to a custom Magento module. Now, it won't be 100% foolproof and you're most likely to need to make a few modifications to this file depending on your setup, but this is a really simple way to populate the guts of this file and avoid the need to do all of this yourself manually. When I presented this idea over to students in my campus Magento community, some of the first feedback I heard was Please make this open source. Since this was really one of the easiest decisions that I could have made, I went ahead and pushed the source code for this browser plugin up to GitHub as well. Well feel free to fork it, modify it, and even contribute back any enhancements that you think would make this browser plugin better. Links to everything are in the description below. And if you like this little tool and want to learn more about the inner workings of Magento or interested in joining our campus community, go ahead and linger over to M Academy and check out the website for a full list of everything that's available. Much love for open Source Magento and everything in between. And as always, keep coding.