Skip to content

Commit ba0143b

Browse files
committed
MAGETWO-90177: Image broken on storefront with secure key enabled
Fix regex matching if directive url contains ?SID=... query string
1 parent 02839d5 commit ba0143b

File tree

3 files changed

+92
-35
lines changed

3 files changed

+92
-35
lines changed

app/code/Magento/Tinymce3/view/base/web/tinymce3Adapter.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -539,9 +539,15 @@ define([
539539
* @return {*}
540540
*/
541541
decodeDirectives: function (content) {
542-
// escape special chars in directives url to use it in regular expression
543-
var url = this.makeDirectiveUrl('%directive%').replace(/([$^.?*!+:=()\[\]{}|\\])/g, '\\$1'),
544-
reg = new RegExp(url.replace('%directive%', '([a-zA-Z0-9,_-]+(?:%2[A-Z]|)+\/?)(?:(?!").)*') + '/?');
542+
var directiveUrl = this.makeDirectiveUrl('%directive%').split('?')[0], // remove query string from directive
543+
// escape special chars in directives url to use in regular expression
544+
regexEscapedDirectiveUrl = directiveUrl.replace(/([$^.?*!+:=()\[\]{}|\\])/g, '\\$1'),
545+
regexDirectiveUrl = regexEscapedDirectiveUrl
546+
.replace(
547+
'%directive%',
548+
'([a-zA-Z0-9,_-]+(?:%2[A-Z]|)+\/?)(?:(?!").)*'
549+
) + '/?(\\\\?[^"]*)?', // allow optional query string
550+
reg = new RegExp(regexDirectiveUrl);
545551

546552
return content.gsub(reg, function (match) {
547553
return Base64.mageDecode(decodeURIComponent(match[1]).replace(/\/$/, '')).replace(/"/g, '"');

dev/tests/js/jasmine/tests/lib/mage/wysiwygAdapter.test.js

Lines changed: 74 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ define([
2727
describe('wysiwygAdapter', function () {
2828
describe('encoding and decoding directives', function () {
2929
function runTests(decodedHtml, encodedHtml) {
30-
var encodedHtmlWithForwardSlashInImgSrc = encodedHtml.replace('src="([^"]+)', 'src="$1/"');
30+
var encodedHtmlWithForwardSlashInImgSrc = encodedHtml.replace(/src="((?:(?!"|\\\?).)*)/, 'src="$1/');
3131

3232
describe('"encodeDirectives" method', function () {
3333
it('converts media directive img src to directive URL', function () {
@@ -47,48 +47,93 @@ define([
4747
it('converts directive URL img src with a trailing forward slash ' +
4848
'to media url without a trailing forward slash',
4949
function () {
50+
expect(encodedHtmlWithForwardSlashInImgSrc).not.toEqual(encodedHtml);
5051
expect(obj.decodeDirectives(encodedHtmlWithForwardSlashInImgSrc)).toEqual(decodedHtml);
5152
}
5253
);
5354
});
5455
}
5556

56-
describe('without secret key', function () {
57-
var decodedHtml = '<p>' +
58-
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
59-
encodedHtml = '<p>' +
60-
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
61-
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C" alt="" width="612" height="459">' +
62-
'</p>';
63-
64-
beforeEach(function () {
65-
obj.initialize('id', {
66-
'directives_url': 'http://example.com/admin/cms/wysiwyg/directive/'
57+
describe('without SID in directive query string', function () {
58+
describe('without secret key', function () {
59+
var decodedHtml = '<p>' +
60+
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
61+
encodedHtml = '<p>' +
62+
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
63+
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C" alt="" width="612" height="459">' +
64+
'</p>';
65+
66+
beforeEach(function () {
67+
obj.initialize('id', {
68+
'directives_url': 'http://example.com/admin/cms/wysiwyg/directive/'
69+
});
6770
});
71+
72+
runTests(decodedHtml, encodedHtml);
6873
});
6974

70-
runTests(decodedHtml, encodedHtml);
75+
describe('with secret key', function () {
76+
var decodedHtml = '<p>' +
77+
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
78+
encodedHtml = '<p>' +
79+
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
80+
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C/key/' +
81+
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58" ' +
82+
'alt="" width="612" height="459">' +
83+
'</p>',
84+
directiveUrl = 'http://example.com/admin/cms/wysiwyg/directive/key/' +
85+
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58/';
86+
87+
beforeEach(function () {
88+
obj.initialize('id', {
89+
'directives_url': directiveUrl
90+
});
91+
});
92+
93+
runTests(decodedHtml, encodedHtml);
94+
});
7195
});
7296

73-
describe('with secret key', function () {
74-
var decodedHtml = '<p>' +
75-
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
76-
encodedHtml = '<p>' +
77-
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
78-
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C/key/' +
79-
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58" ' +
80-
'alt="" width="612" height="459">' +
81-
'</p>',
82-
directiveUrl = 'http://example.com/admin/cms/wysiwyg/directive/key/' +
83-
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58/';
84-
85-
beforeEach(function () {
86-
obj.initialize('id', {
87-
'directives_url': directiveUrl
97+
describe('with SID in directive query string', function () {
98+
describe('without secret key', function () {
99+
var decodedHtml = '<p>' +
100+
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
101+
encodedHtml = '<p>' +
102+
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
103+
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C?SID=something" ' +
104+
'alt="" width="612" height="459">' +
105+
'</p>',
106+
directiveUrl = 'http://example.com/admin/cms/wysiwyg/directive?SID=something';
107+
108+
beforeEach(function () {
109+
obj.initialize('id', {
110+
'directives_url': directiveUrl
111+
});
88112
});
113+
114+
runTests(decodedHtml, encodedHtml);
89115
});
90116

91-
runTests(decodedHtml, encodedHtml);
117+
describe('with secret key', function () {
118+
var decodedHtml = '<p>' +
119+
'<img src="{{media url=&quot;wysiwyg/banana.jpg&quot;}}" alt="" width="612" height="459"></p>',
120+
encodedHtml = '<p>' +
121+
'<img src="http://example.com/admin/cms/wysiwyg/directive/___directive' +
122+
'/e3ttZWRpYSB1cmw9Ind5c2l3eWcvYmFuYW5hLmpwZyJ9fQ%2C%2C/key/' +
123+
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58?SID=something" ' +
124+
'alt="" width="612" height="459">' +
125+
'</p>',
126+
directiveUrl = 'http://example.com/admin/cms/wysiwyg/directive/key/' +
127+
'5552655d13a141099d27f5d5b0c58869423fd265687167da12cad2bb39aa9a58?SID=something';
128+
129+
beforeEach(function () {
130+
obj.initialize('id', {
131+
'directives_url': directiveUrl
132+
});
133+
});
134+
135+
runTests(decodedHtml, encodedHtml);
136+
});
92137
});
93138
});
94139
});

lib/web/mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -608,9 +608,15 @@ define([
608608
* @return {*}
609609
*/
610610
decodeDirectives: function (content) {
611-
// escape special chars in directives url to use it in regular expression
612-
var url = this.makeDirectiveUrl('%directive%').replace(/([$^.?*!+:=()\[\]{}|\\])/g, '\\$1'),
613-
reg = new RegExp(url.replace('%directive%', '([a-zA-Z0-9,_-]+(?:%2[A-Z]|)+\/?)(?:(?!").)*') + '/?');
611+
var directiveUrl = this.makeDirectiveUrl('%directive%').split('?')[0], // remove query string from directive
612+
// escape special chars in directives url to use in regular expression
613+
regexEscapedDirectiveUrl = directiveUrl.replace(/([$^.?*!+:=()\[\]{}|\\])/g, '\\$1'),
614+
regexDirectiveUrl = regexEscapedDirectiveUrl
615+
.replace(
616+
'%directive%',
617+
'([a-zA-Z0-9,_-]+(?:%2[A-Z]|)+\/?)(?:(?!").)*'
618+
) + '/?(\\\\?[^"]*)?', // allow optional query string
619+
reg = new RegExp(regexDirectiveUrl);
614620

615621
return content.gsub(reg, function (match) {
616622
return Base64.mageDecode(decodeURIComponent(match[1]).replace(/\/$/, '')).replace(/"/g, '&quot;');

0 commit comments

Comments
 (0)