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
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
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 ).
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#..
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.
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#’);
info = styleEl.getStyle(‘<newproperty used>’); pos = info.indexOf(‘<newvalueused>#’);
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