Fix cors loading of images

eKoopmans · May 18, 2014 · 9ee8733 · 9ee8733
1 parent b7595e1
commit 9ee8733
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 15 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -38,6 +38,26 @@ module.exports = function(grunt) {
                     keepalive: true
                 }
             },
+            cors: {
+                options: {
+                    port: 8081,
+                    base: './',
+                    keepalive: false,
+                    middleware: function(connect, options, middlwares) {
+                        return [
+                            function(req, res, next) {
+                                if (req.url !== '/tests/assets/image2.jpg') {
+                                    next();
+                                    return;
+                                }
+                                res.setHeader("Access-Control-Allow-Origin", "*");
+                                res.end(require("fs").readFileSync('tests/assets/image2.jpg'));
+                            },
+                            connect.static(options.base[0])
+                        ];
+                    }
+                }
+            },
             ci: {
                 options: {
                     port: 8080,
@@ -85,9 +105,9 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-connect');
 
     // Default task.
-    grunt.registerTask('server', ['connect']);
+    grunt.registerTask('server', ['connect:cors', 'connect']);
     grunt.registerTask('build', ['concat', 'uglify']);
     grunt.registerTask('default', ['jshint', 'concat', 'qunit', 'uglify']);
-    grunt.registerTask('travis', ['jshint', 'concat','qunit', 'uglify', 'connect:ci', 'webdriver']);
+    grunt.registerTask('travis', ['jshint', 'concat','qunit', 'uglify', 'connect:ci', 'connect:cors', 'webdriver']);
 
 };
diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "png-js": ">= 0.1.1",
     "baconjs": "0.7.11",
     "wd": "~0.2.7",
-    "grunt-contrib-connect": "~0.6.0"
+    "grunt-contrib-connect": "0.7.1"
   },
   "scripts": {
     "test": "grunt travis --verbose"

diff --git a/src/imageloader.js b/src/imageloader.js
@@ -2,7 +2,7 @@ function ImageLoader(options, support) {
     this.link = null;
     this.options = options;
     this.support = support;
-    this.origin = window.location.protocol + window.location.hostname;
+    this.origin = window.location.protocol + window.location.hostname + window.location.port;
 }
 
 ImageLoader.prototype.findImages = function(nodes) {
@@ -60,7 +60,7 @@ ImageLoader.prototype.isSameOrigin = function(url) {
     var link = this.link || (this.link = document.createElement("a"));
     link.href = url;
     link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
-    var origin = link.protocol + link.hostname;
+    var origin = link.protocol + link.hostname + link.port;
     return (origin === this.origin);
 };
 

diff --git a/tests/cases/images/base.html b/tests/cases/images/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>External content tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+
+    <base href="http://www.google.com/" />
+</head>
+<body>
+<h1>External image</h1>
+<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
+
+<h1>External image (using &lt;base&gt; href)</h1>
+<img src="/logos/2011/gregormendel11-res.jpg" />
+</body>
+</html>
diff --git a/tests/cases/images/cross-origin.html b/tests/cases/images/cross-origin.html
@@ -3,19 +3,13 @@
     <head>
         <title>External content tests</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <script>
+            h2cOptions = {useCORS: true};
+        </script>
         <script type="text/javascript" src="../../test.js"></script>
-
-        <base href="http://www.google.com/" />
     </head>
     <body>
-        <h1>External image</h1>
-        <img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
-
-        <h1>External image (using &lt;base&gt; href)</h1>
-        <img src="/logos/2011/gregormendel11-res.jpg" />
-
         <h1>External image (CORS)</h1>
-        <img src="http://publishmydata.com/assets/home/blue_bg.png" />
-
+        <img src="http://localhost:8081/tests/assets/image2.jpg" />
     </body>
 </html>