How to Fix Extjs 4.2 IE Security Errors with https protocol, about:blank urls


Problem Statement 

Application developed with Extjs 4.2.0 , launching the application with https protocol in IE (8) browsers doesn’t load the application properly and it gives error message non secure items cannot be shown in secure page.

This blog is with the reference to Forum post . In this article we discuss about the root cause and Fix for this issue in detail

Root Cause:

In Extjs 4.2 theming mechanism has been changed . In this change process to generate/use the sprite images specially for rounded corners in the old browsers like IE 8.

x-frame mixin defined in frame.scss has got background-image css rule defines as below

background-image: url(‘about:blank#{$framing-info}’);

Where this is actually is used in class Ext.util.Renderable getFrameInfo function to identify the border-radius of the each corner and padding.

 
// The framing data is encoded as
     // 
     //                   D=div|T=table
     //                   |   H=horz|V=vert
     //                   |   |
     //                   |   |
     //      about:blank#[DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
     //                          /       /  |       |  \      \
     //                        /        /   |       |   \      \
     //                      /         /   /         \   \      \
     //                    /          /    border-width   \      \
     //                  border-radius                      padding

IE Considers about:blank as a new resource to load and will be treated as request with http protocol. So now the page is loading the combination of https and http resources. which is causing the issue.

The same error is being shown in IE.

How do we Fix  This:

To Fix this issue changes are required in SCSS as well as JS i.e (  Ext.util.Renderable class ).

Frame.scss Changes

Modify the frame.scss file in your there or the existing theme . In frame.scss file override the x-frame mixin to use some image file path instead of about:blank#..

Example:

background-image: url(‘blankimage.png#{$framing-info}’);

instead of

background-image: url(‘about:blank#{$framing-info}’);

JS Changes

Define a new class with overriding Ext.util.Renderable and override the getFrameInfo function.

In this overridden function copy the actual code of the getFrameInfo function of Renderable getFrameInfo function code , by changing the about:blank# to the new value we have used in this case blank image.png#

pos = info.indexOf(‘about:blank#’);   To   pos = info.indexOf(‘blankimage.png#’);

Build the theme again and add the overridden class to the requires of the application. This solves the problem with IE security errors.

NOTE:

In the fix mentioned above used the background-mage css property and changed the value. Which may also cause the unnecessary hits to server to load the dummy file.

If you think is not desired then you can use any other CSS property which is not really required in this case and use that..

When you use a css property other than background-image then your required to change the two lines the getFrameInfo function

info = styleEl.getStyle(‘background-image’); pos = info.indexOf(‘about:blank#’);

TO

info = styleEl.getStyle(‘<newproperty used>’); pos = info.indexOf(‘<newvalueused>#’);

Summary

The purpose of this article was to show how how to fix the IE security error with Extjs 4.2 and https protocol . I hope you found this article helpful. In case you need any professional support on Sencha products like ExtJS and Sencha Touch do visit our website and get in touch with us.

The Latest Versions of Extjs this issue has been fixed. Extjs 4.2.1

I am an experienced software architect involved in architecture, design, and implementation of full-stack Mobile and Web Application, and have significant experience and expertise in Sencha ExtJS/Touch, Angular, MEAN and Java/J2EE. I love to play with my son when I am not working.

Tagged with: , , , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: