How to replace production JS with the one hosted on Github

github hosted js in production

GitHub is a widely-used online project hosting service where users commit scripts, stylesheets, and other file types for their projects. Often, there’s a need to reference GitHub-hosted scripts in different projects. This article explores how you can seamlessly replace production JS using Requestly, offering a straightforward solution for integrating external resources

Explanation – Why raw Github urls don’t work?

We analysed the response headers set by github when serving raw.githubusercontent.com/<file_path> files. We tried to open a very simple JS file hosted on Github with the following contents:

    				
    					var BG = BG || {}; 
    BG.Methods = BG.Methods || {};
    
    				
    			

    We found that Github sends X-Content-Type-Options response header which prevents modern browsers to estimate the mime type of content. Hence, browsers render the raw Github files as plain text.

    Solution :

    Using Requestly, Users can modify request and response headers. We tried removing X-Content-Type-Options response header using Requestly which did the trick. Just as simple as that.

    Here is a screenshot of the rule:

    removing X-Content-Type-Options to replace production js
    #image_title

    Steps :

    • Install Requestly
    • Open Rules Page
    • Click on “New Rule” button
    • Select Modify Headers option and in the source field enter
      URL | Contains | raw.githubusercontent.com
    • In the Response headers section,
      Remove Header | X-Content-Type-Options

    OR

    How to test

    We created a simple JS Fiddle to test out if we can use raw Github files as scripts in our code. Here is the Fiddle with the following code

    				
    					<script defer src="https://raw.githubusercontent.com/sachinjain024/practicebook/master/web-extensions-master/storage/background.js"></script> <center id="msg"></center> <script defer src="data:text/javascript;base64,CnRyeSB7CiAgICAgaWYgKHR5cGVvZiBCRy5NZXRob2RzICE9PSAndW5kZWZvbmVkJykgewogIAlkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbXNnJykuaW5uZXJIVE1MID0gJ3NjcmlwdCBldmFsdWF0ZWQgc3VjY2Vzc2Z1bGx5ISc7CiAgICAgfQp9IGNhdGNoIChlKSB7CiAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21zZycpLmlubmVySFRNTCA9ICdQcm9ibGVtIGV2YWx1YXRpbmcgc2NyaXB0JzsKfQo="></script> 
    				
    			

    If you see Script evaluated successfully!, It means you are able to use raw Github file in your code Otherwise Problem evaluating script indicates that there is some problem while executing script from raw github source.

    References

    Share this article:

    This article was written by:

    Picture of Sagar Soni

    Sagar Soni

    Sagar is the co-founder and CTO of Requestly. When he's not busy architecting the next big thing in software development, you'll likely find him behind the wheel, cruising the streets and enjoying the thrill of the drive. For Sagar, it's all about the code by day and the open road by night.
    Contents