From 48e9b881b1f20bcdb8d9f1f9eb11011e54d8b210 Mon Sep 17 00:00:00 2001
From: MoyuScript <i@moyu.moe>
Date: Sun, 18 May 2014 17:40:01 +0300
Subject: [PATCH] Fix cors loading of images
---
Gruntfile.js | 24 ++++++++++++++++++++++--
package.json | 2 +-
src/imageloader.js | 4 ++--
tests/cases/images/base.html | 17 +++++++++++++++++
tests/cases/images/cross-origin.html | 14 ++++----------
5 files changed, 46 insertions(+), 15 deletions(-)
create mode 100644 tests/cases/images/base.html
diff --git a/Gruntfile.js b/Gruntfile.js
index bf781e5..58fb5cb 100644
--- 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
index a6d1a0d..a53ee68 100644
--- 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
index a602642..1feb79a 100644
--- 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
new file mode 100644
index 0000000..b3c4f5e
--- /dev/null
+++ 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 <base> 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
index 10343c3..7a5fadc 100644
--- 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 <base> 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>