webpack · shellscape · Oct 8, 2017 · Sep 26, 2017 · Sep 27, 2017 · Sep 27, 2017
@@ -219,6 +219,15 @@ function reloadApp() {
     }
   } else {
     log.info('[WDS] App updated. Reloading...');
-    self.location.reload();
+    let rootWindow = self;
+    // use parent window for reload (in case we're in an iframe with no valid src)
+    do {
+      if (rootWindow.location.protocol !== 'about:') {
+        break;
+      }
+      rootWindow = self.parent;
+    } while (rootWindow.parent !== self.parent);
+
+    rootWindow.location.reload();
   }
 }
diff --git a/examples/cli-public-protocol/Dockerfile.devserver b/examples/cli-public-protocol/Dockerfile.devserver
@@ -0,0 +1,6 @@
+FROM node:6
+
+EXPOSE 80
+
+VOLUME /devserver
+WORKDIR /devserver/examples/cli-public-protocol
diff --git a/examples/cli-public-protocol/Dockerfile.nginx b/examples/cli-public-protocol/Dockerfile.nginx
@@ -0,0 +1,6 @@
+FROM nginx
+
+COPY nginx-default.conf /etc/nginx/conf.d/default.conf
+
+RUN openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/nginx-selfsigned.key -out /etc/ssl/certs/nginx-selfsigned.crt -subj "/C=US/ST=Denial/L=Springfield/O=Dis/CN=localhost" && \
+    openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048
@@ -0,0 +1,19 @@
+# CLI - public protocol
+
+NOTE: make sure you have docker and docker-compose (at least version 2) installed and already installed all dependencies via `npm install` in the repository.
+
+```shell
+docker-compose up
+```
+
+If you're manually injecting an entrypoint to an iframe, the client needs to know where to connect to the server. Since an iframe with `src="about:blank` doesn't know which protocol you're using on the outside we need to explicitly define it with the `public` option (have a look to the config provided in `webpack.config.js`).
+
+To be able to show how this works together with an nginx reverse proxy there's a small docker setup which does this for you.
+
+## What should happen
+
+The `docker-compose up` starts up two containers (nginx and devserver), whereas nginx is exposing port 80 and 443 (with a self-signed certificate). If you open your browser and navigate to `https://localhost` you have to accept the self-signed certificate which is - of course - not secure but ok for testing purposes. After that you can see an iframe which says `I'm sitting in the iframe and the socket connection to dev-server works!`. 
+
+If you have a look at the network tab of the inspector you'll see that the `sockjs-node` connection is up and running. If you wouldn't specify the `https://` protocol in the `public` option, it would try to connect to the socket via `http://localhost` which would fail because the parent window is loaded via `https` and therefore violate the security rules of the browser. 
+
+If you edit the contents of `app.js` you'll also see that auto-reloading works.
@@ -0,0 +1,5 @@
+'use strict';
+
+const h3El = document.createElement('h3');
+h3El.innerHTML = 'I\'m sitting in the iframe asdfand the socket connection to dev-server works!';
+document.body.appendChild(h3El);
diff --git a/examples/cli-public-protocol/docker-compose.yml b/examples/cli-public-protocol/docker-compose.yml
@@ -0,0 +1,20 @@
+version: '2'
+
+services:
+  nginx:
+    build:
+      context: .
+      dockerfile: Dockerfile.nginx
+    ports:
+      - 80:80
+      - 443:443
+    links:
+      - devserver
+
+  devserver:
+    build:
+      context: .
+      dockerfile: Dockerfile.devserver
+    volumes:
+      - ../../:/devserver
+    command: 'node /devserver/bin/webpack-dev-server.js'
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+	<head>
+	</head>
+	<body>
+		<iframe id="testframe" src="about:blank"></iframe>
+
+		<script>
+			var testframe = document.getElementById('testframe');
+			var scriptEl = document.createElement('script');
+			scriptEl.setAttribute('src', 'https://localhost/bundle.js');
+			testframe.contentDocument.head.appendChild(scriptEl);
+		</script>
+	</body>
+</html>
diff --git a/examples/cli-public-protocol/nginx-default.conf b/examples/cli-public-protocol/nginx-default.conf
@@ -0,0 +1,32 @@
+server {
+  listen       80;
+  listen       443 ssl;
+
+  ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
+  ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;
+
+  ssl_dhparam /etc/ssl/certs/dhparam.pem;
+  ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
+  ssl_session_timeout 1d;
+  ssl_session_cache shared:SSL:50m;
+  ssl_stapling on;
+  ssl_stapling_verify on;
+  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+  ssl_prefer_server_ciphers on;
+
+  charset UTF-8;
+
+  location /sockjs-node {
+    proxy_pass http://devserver;
+
+    proxy_buffering off;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_read_timeout 1d;
+  }
+
+  location / {
+    proxy_pass http://devserver;
+  }
+}
@@ -0,0 +1,12 @@
+'use strict';
+
+module.exports = {
+  context: __dirname,
+  entry: './app.js',
+  devServer: {
+    host: '0.0.0.0',
+    port: 80,
+    public: 'https://localhost',
+    disableHostCheck: true
+  }
+};
@@ -10,8 +10,12 @@ module.exports = function createDomain(options, listeningApp) {
   const port = options.socket ? 0 : appPort;
   const hostname = options.useLocalIp ? internalIp.v4() : options.host;
 
+  // use explicitly defined public url (prefix with protocol if not explicitly given)
+  if (options.public) {
+    return /^[a-zA-Z]+:\/\//.test(options.public) ? `${options.public}` : `${protocol}://${options.public}`;
+  }
   // the formatted domain (url without path) of the webpack server
-  return options.public ? `${protocol}://${options.public}` : url.format({
+  return url.format({
     protocol,
     hostname,
     port

@@ -0,0 +1,94 @@
+'use strict';
+
+const webpack = require('webpack');
+const internalIp = require('internal-ip');
+const Server = require('../lib/Server');
+const createDomain = require('../lib/util/createDomain');
+const config = require('./fixtures/simple-config/webpack.config');
+
+describe('check utility funcitons', () => {
+  let compiler;
+  before(() => {
+    compiler = webpack(config);
+  });
+
+  const tests = [{
+    name: 'default',
+    options: {
+      host: 'localhost',
+      port: 8080
+    },
+    expected: 'http://localhost:8080'
+  }, {
+    name: 'https',
+    options: {
+      host: 'localhost',
+      port: 8080,
+      https: true
+    },
+    expected: 'https://localhost:8080',
+    timeout: 10000
+  }, {
+    name: 'override with public',
+    options: {
+      host: 'localhost',
+      port: 8080,
+      public: 'myhost.test'
+    },
+    expected: 'http://myhost.test'
+  }, {
+    name: 'override with public (port)',
+    options: {
+      host: 'localhost',
+      port: 8080,
+      public: 'myhost.test:9090'
+    },
+    expected: 'http://myhost.test:9090'
+  }, {
+    name: 'override with public (protocol)',
+    options: {
+      host: 'localhost',
+      port: 8080,
+      public: 'https://myhost.test'
+    },
+    expected: 'https://myhost.test'
+  }, {
+    name: 'override with public (protocol + port)',
+    options: {
+      host: 'localhost',
+      port: 8080,
+      public: 'https://myhost.test:9090'
+    },
+    expected: 'https://myhost.test:9090'
+  }, {
+    name: 'localIp',
+    options: {
+      useLocalIp: true,
+      port: 8080
+    },
+    expected: `http://${internalIp.v4()}:8080`
+  }];
+
+  tests.forEach((t) => {
+    const itInstance = it(`test createDomain '${t.name}'`, (done) => {
+      const options = t.options;
+      const server = new Server(compiler, options);
+      const expected = t.expected;
+      server.listen(options.port, options.host, (err) => {
+        if (err) {
+          done(err);
+        }
+        const generatedDomain = createDomain(options, server.listeningApp);
+        if (generatedDomain !== expected) {
+          done(`generated domain ${generatedDomain} doesn't match expected ${expected}`);
+        } else {
+          done();
+        }
+        server.close();
+      });
+    });
+    if (t.timeout) {
+      itInstance.timeout(t.timeout);
+    }
+  });
+});