When trying to run js-bookmarklets on certain websites, you may encounter an issue where they simply don’t work. One common reason for this is CORS (Cross-Origin Resource Sharing) policies, which restrict how web pages can interact with resources from different origins. For example, DevakaTools Bookmarklet won’t run on such a websites. In this article I’ll show how to make your bookmarklets work using Overrides in Chrome DevTools.
What is CORS
CORS is a security feature implemented by browsers to prevent malicious websites from accessing resources and data on other websites without permission. When you try to run a js-bookmarklet that makes a request to a different domain (such as loading an external script or making an API call), CORS policies may block this action if the destination site does not allow cross-origin requests. And the bookmarklet won’t function as intended.
How to Bypass CORS Using Chrome DevTools Overrides
Chrome DevTools provides a powerful set of tools for web developers, one of which is the Overrides feature. This feature allows you to modify and override various HTTP request headers, including those related to CORS, enabling you to bypass the CORS restrictions for testing purposes.
Steps for Setting Up Overrides in Chrome DevTools
1. Open Chrome DevTools
Right-click on the page where your bookmarklet isn’t working and select Inspect, or press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac) to open DevTools.
2. Navigate to the Network Panel
Go to the Network tab in DevTools. This will allow you to monitor and interact with network requests made by the webpage.
3. Right-click a Request You Want to Override
Right-click on a network first request in the Network panel. First request is for current document you navigating on.
From the drop-down menu, choose Override headers. Or find header named “Content-Security-Policy” and click pen at the right side.
4. Set Up Local Overrides (If You Haven’t Done It Yet)
If you haven’t set up local overrides yet, DevTools will prompt you to select a folder to store the override files.
Click Select folder and choose or create a folder on your local machine to store the override files.
DevTools will then ask for permission to grant access to this folder. Click Allow to grant the necessary access rights.
5. Make Changes to Your Request
Once local overrides are set up and enabled DevTools will take you to The Network > Headers > Response Headers section if you’re modifying response headers, such as the Content-Security-Policy header to bypass CORS restrictions.
Change all the content of Content-Security-Policy header to “*” (asterisk mark).
6. Save and Test
After making the necessary changes (e.g., adjusting headers to allow cross-origin requests), save your changes and reload the page to see the effect. Your bookmarklet should now be able to run without CORS issues.
7. You can setup overrides for all pages for that domain or remove your overrides. For that go to Sources tab and find Overrides section.
For a more detailed guide on using overrides in Chrome DevTools, you can refer to the official documentation here: Chrome DevTools Overrides Documentation.
This short video will help you to understand the process of setting Overrides and enabling js-bookmarklets.
If you’ll have any questions don’t hesitate to ask.
Leave a Reply