How to Include CSS and Js Files Via Https When Needed

How to Include CSS and JS files via HTTPS when needed?

Use protocol-relative paths.

Thus not

<link rel="stylesheet" href="http://example.com/style.css">
<script src="http://example.com/script.js"></script>

but so

<link rel="stylesheet" href="//example.com/style.css">
<script src="//example.com/script.js"></script>

then it will use the protocol of the parent page.

How to load css files via http on a https site.

Most modern, up-to-date Browsers don't load resources over HTTP if the Document is accessed over HTTPS, this is to keep users from making the connection only partially encrypted. Read more on that at MDN

You should change the src-attribute of your <link> elements with the stylesheets to make the request over HTTPS,
like this: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

How to load up CSS files using Javascript?

Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute unfortunately IE6 doesn't support it consistently.

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.example/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

This example checks if the CSS was already added so it adds it only once.

Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.

VanillaJS

Here is an example that uses plain JavaScript to inject a CSS link into the head element based on the filename portion of the URL:

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Insert the code just before the closing head tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js) file will cause a Flash of unstyled content (FOUC) to appear.

Tips on loading external css and javascript over https

There shouldn't be. Such security measures are in place for good reason.

Even if you could remove them, doing so would be a very bad idea.

A man-in-the-middle attack would allow the JS or CSS (which can have embedded JS via various browser extensions) to be substituted.

This would allow an attacker to run any JS they liked on the page.

That JS could grab any data from the page and send it to the attacker.

The page would not be secure.

Copy the assets somewhere that you can access them over HTTPS.

How to upload all html, css and javascript at once

Looks like you're just getting introduced to web development, these might come in handy for finding out how to bring your HTML, JS and CSS files together:

1. (Link JS File) - https://www.w3schools.com/tags/att_script_src.asp
2. (Link CSS file) - https://www.w3schools.com/tags/tag_link.asp
3. https://www.w3schools.com/

Laravel include css, js using ssl

I had an issue with this too. My SSL is redirecting fine, but the CSS and JS links generated by {{ HTML::style('css/style.css') }} and HTML::script('js/script.js') were linking to the http versions.

If you look at the Illuminate\Html\HtmlBuilder Documentation you'll see that you can specify the secure version as follows:

{{ HTML::style('css/style.css', array(), true) }}

{{ HTML::script('js/script.js', array(), true) }}

true means $secure flag is on.

import CSS and JS files using Webpack

After playing out with Webpack in multiple projects, I figured out how Webpack loads stuff. Since the question is still unanswered, I decided to do it myself for anybody with same need.

Directory structure

->assets
  ->css
    ->my-style-1.css //custom styling file 1
    ->my-style-2.css //custom styling file 2

->src
  ->app
    ->app.js
    ->variables.js

  ->libs.js //require all js libraries here
  ->styles-custom.js //require all custom css files here
  ->styles-libs.js //require all style libraries here

->node_modules
->index.html
->package.json
->webpack.config.js

Bundle 1 (main code of app)

app.js: assuming this is main file and app starts from here

var msgs = require('./variables');
//similarly import other js files you need in this bundle

//your application code here...
document.getElementById('heading').innerText = msgs.foo;
document.getElementById('sub-heading').innerText = msgs.bar;

Bundle 2 (js modules)

libs.js: this file will require all modules needed

require('bootstrap');
//similarly import other js libraries you need in this bundle

Bundle 3 (external css files)

styles-libs.js: this file will require all external css files

require('bootstrap/dist/css/bootstrap.css');
//similarly import other css libraries you need in this bundle

Bundle 4 (custom css files)

styles-custom.js: this file will require all custom css files

require('../assets/css/my-style-1.css');
require('../assets/css/my-style-2.css');
//similarly import other css files you need in this bundle

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'app': './src/app/app.js', //specifying bundle with custom js files
        'libs': './src/libs.js', //specifying bundle with js libraries
        'styles-custom': './src/styles-custom.js', //specifying bundle with custom css files
        'styles-libs': './src/styles-libs.js', //specifying bundle with css libraries
    },
    module: {
        loaders: [
            //used for loading css files
            {
                test: /\.css$/,
                loader: extractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            //used for loading fonts and images
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //directory for output files
        filename: '[name].js' //using [name] will create a bundle with same file name as source
    },
    plugins: [
        new extractTextPlugin('[name].css'), //is used for generating css file bundles

        //use this for adding jquery
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jQuery'
        })
    ]
}

index.html

<head>
  <link rel="stylesheet" href="dist/styles-libs.css" />
  <link rel="stylesheet" href="dist/styles-custom.css" />
</head>
<body>
  <h2 id="heading"></h2>
  <h3>
    <label id="sub-heading" class="label label-info"></label>
  </h3>
  <script src="dist/libs.js"></script>
  <script src="dist/app.js"></script>
</body>

---

Related Topics