Search code examples
javascriptjqueryhtmlstrip

Strip off the path of the href after the file is loaded into the browser

When I load a web page and do a view source, then I can see 

<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css"/>

If I type in www.example.com/css/bootstrap/bootstrap.min.css in the address bar of the browser, then I can see the whole css file.

Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?

Any help is appreciated.

Thanks

Solution

  • Is there any way where I can strip off the path of the href after the file is loaded into the browser, something like css/bootstrap/bootstrap.min.css becomes bootstrap.min.css?

    No. Most browsers implement "view source" by re-requesting the page from your server (which may or may not come from cache) and then showing that text, exactly; you don't have an opportunity to run client-side code to remove link or style elements (and it would have to be client-side code, because naturally you can't do this server-side and still have the page render correctly for normal requests).

    Even if you could run client-side code before the "view source" was shown, you can't do this with CSS anyway: Altering or removing the link element will remove the stylesheet associated with it. Even if you could (guessing at your reason for this), it wouldn't prevent anyone from being able to see your CSS with the most trivial amount of effort.

    You could do something similar with JavaScript on your page (you can remove the script tag entirely once it's been run, it won't affect the code it loaded), but not with CSS, and that just prevents people from seeing the script elements in the debugging tools, not "view source."

    Any pointers on removing the JavaScript tags...

    Sure, as you're using jQuery, it's as simple as putting:

    $("script").remove();

    ...in code that runs after all the other script code has run. Here's an example:

    $(".dp").datepicker();
$("script").remove();
    <link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<label>
  Pick a date: <input type="text" class="dp">
</label>

    Note that the jQuery UI datepicker keeps working, even though we removed the jQuery and jQuery UI script elements from the DOM. But again, they'd still be there in a "view source," because the above is client-side code.