[CLOSED] HTTPS issues with non https content

[jchau]

I've updated our online test with the 2.2.0 release versions of the Ext JS .js and .css, see

https://s83470.gridserver.com/

We will run some tests.

Were you using the SVN build of Ext.NET prior to this latest ssl error? I ask because I don't think anything changed recently (last week+) with the Ext JS resource files.

I will try to hit that server today. I was using SVN build of Ext.NET prior. Things did certainly change because our QA team found a few regression errors that I will be posting soon.

[jchau]

I got the https warning hitting

https://s83470.gridserver.com/

with IE8, Win7, compatibility mode on and off.

[geoffrey.mcgill]

I got the https warning hitting

https://s83470.gridserver.com/

with IE8, Win7, compatibility mode on and off.

Thanks for the confirmation. We'll track down the problem and fix. We should also be able to make a public 2.2.1 release, although the fix will first be committed to both the /trunk/ and /branches/2.2/.

[jchau]

This sencha thread says a similar issue (maybe same issue) is fixed in ExtJS 4.2.1. Hopefully you guys have early access to that to test it out?

http://www.sencha.com/forum/showthread.php?261165

[geoffrey.mcgill]

This sencha thread says a similar issue (maybe same issue) is fixed in ExtJS 4.2.1. Hopefully you guys have early access to that to test it out?

http://www.sencha.com/forum/showthread.php?261165

Yes, we have the update. Once 4.2.1 final is released, we'll integrate into 2.2.1 and make another public Ext.NET release.

We'll investigate adding the Ext JS 4.2.1 beta build into /branches/2.2/.

[jchau]

Yes, we have the update. Once 4.2.1 final is released, we'll integrate into 2.2.1 and make another public Ext.NET release.

We'll investigate adding the Ext JS 4.2.1 beta build into /branches/2.2/.

Do you think it will be within the next 2 days? If not, I will try to revert back to the older DLL and test again just to make sure.

[jchau]

I reverted back to an older DLL that I tested to work with your sample page and https. But it turned out quickTips = false was a false positive. If you set QuickTips = false, it does fix the page if there's NOTHING on it but ExtJS scripts and css files. But if you add an ext button to the page, it still fails with https warning if QuickTips = false. Is there any possible fix / workaround for this? Our release has been delayed due to one ExtJS upgrade issue after another.

[Daniil]

Confirm, QuickTips="false" is not a solution.

Here are my findings.

Comparing ExtJS 4.2.0 and 4.2.1 beta sources I discovered that the CSS rules like:

body.x-nbr .x-btn-default-small {
   background-image: url("about:blank#th-3-3-3-3-1-1-1-1-2-2-2-2");
}

were replaced with the CSS rules like:

body.x-nbr .x-btn-default-small-frameInfo {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
}

I guess it was because the issue we are facing. It appears that

background-image: url("about:blank#th-3-3-3-3-1-1-1-1-2-2-2-2");

causes a security warning.

So, to correct it on the CSS level it needs to add the following to correct a button (a "small" one):

body.x-nbr .x-btn-default-small {
    background-image: none !important;
}

body.x-nbr .x-btn-default-small-frameInfo {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
}

To correct quick tips:

body.x-nbr .x-tip-default {
    background-image: none !important;
}

body.x-nbr .x-tip-default-frameInfo {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#th-3-3-3-3-1-1-1-1-2-2-2-2");
}

Totally, I have found 34 appearances in the ext-theme-classic CSS file. I guess to fix the issue it needs to override them all. Moveover, for each theme (not sure about Neptune). Well, it is going to be complicated to override everything.

Another aspect.

This "-frameInfo" postfix thing is managed within the Ext.util.Renderable class which is mixed into the Ext.AbstractComponent class. I have extracted the related changes.

AbstractComponent override

Ext.AbstractComponent.override({
    frameInfoRe: /ext-frame#(.+)"/,

    getElConfig : function() {
        var me = this,
            autoEl = me.autoEl,
            frameInfo = me.getFrameInfo(),
            config = {
                tag: 'div',
                tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
            },
            protoEl = me.protoEl,
            i, frameElNames, len, suffix, frameGenId, frameData;

        me.initStyles(protoEl);
        protoEl.writeTo(config);
        protoEl.flush();

        if (Ext.isString(autoEl)) {
            config.tag = autoEl;
        } else {
            Ext.apply(config, autoEl); // harmless if !autoEl
        }

        // It's important to assign the id here as an autoEl.id could have been (wrongly) applied and this would get things out of sync
        config.id = me.id;

        if (config.tpl) {
            // Use the framingTpl as the main content creating template. It will call out to this.applyRenderTpl(out, values)
            if (frameInfo) {
                frameElNames = me.frameElNames;
                len = frameElNames.length;

                config.tplData = frameData = me.getFrameRenderData();
                frameData.renderData = me.initRenderData();
                frameGenId = frameData.fgid;

                // Add the childEls for each of the frame elements
                for (i = 0; i < len; i++) {
                    suffix = frameElNames[i];
                    me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
                }

                // Panel must have a frameBody
                me.addChildEls({
                    name: 'frameBody',
                    id: frameGenId + 'MC'
                });
            } else {
                config.tplData = me.initRenderData();
            }
        }

        return config;
    },

    /**
     * @private
     * On render, reads an encoded style attribute, "filter" from the style of this Component's element.
     * This information is memoized based upon the CSS class name of this Component's element.
     * Because child Components are rendered as textual HTML as part of the topmost Container, a dummy div is inserted
     * into the document to receive the document element's CSS class name, and therefore style attributes.
     */
    getFrameInfo: function() {
        // If native framing can be used, or this component is not going to be framed, then do not attempt to read CSS framing info.
        if (Ext.supports.CSS3BorderRadius || !this.frame) {
            return false;
        }

        var me = this,
            frameInfoCache = me.frameInfoCache,
            cls = me.getFramingInfoCls() + '-frameInfo',
            frameInfo = frameInfoCache[cls],
            max = Math.max,
            styleEl, match, info, frameTop, frameRight, frameBottom, frameLeft,
            borderWidthT, borderWidthR, borderWidthB, borderWidthL,
            paddingT, paddingR, paddingB, paddingL,
            borderRadiusTL, borderRadiusTR, borderRadiusBR, borderRadiusBL;

        if (frameInfo == null) {
            // Get the singleton frame style proxy with our el class name stamped into it.
            styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
            info = styleEl.getStyle('filter');

            if (info) {
                match = info.match(me.frameInfoRe);
                if (match) {
                    // The framing data is encoded as
                    // 
                    //                   D=div|T=table
                    //                   |   H=horz|V=vert
                    //                   |   |
                    //                   |   |
                    //        ext-frame#[DT][HV]-[T-R-B-L]-[T-R-B-L]-[T-R-B-L]
                    //                          /       /  |       |  \      \
                    //                        /        /   |       |   \      \
                    //                      /         /   /         \   \      \
                    //                    /          /    border-width   \      \
                    //                  border-radius                      padding
                    //
                    // The first 2 chars hold the div/table and horizontal/vertical flags.
                    // The 3 sets of TRBL 4-tuples are the CSS3 values for border-radius,
                    // border-width and padding, respectively.
                    //
                    info = match[1].split('-');
                    
                    borderRadiusTL = parseInt(info[1], 10);
                    borderRadiusTR = parseInt(info[2], 10);
                    borderRadiusBR = parseInt(info[3], 10);
                    borderRadiusBL = parseInt(info[4], 10);
                    borderWidthT   = parseInt(info[5], 10);
                    borderWidthR   = parseInt(info[6], 10);
                    borderWidthB   = parseInt(info[7], 10);
                    borderWidthL   = parseInt(info[8], 10);
                    paddingT       = parseInt(info[9], 10);
                    paddingR       = parseInt(info[10], 10);
                    paddingB       = parseInt(info[11], 10);
                    paddingL       = parseInt(info[12], 10);
    
                    // This calculation should follow ext-theme-base/etc/mixins/frame.css
                    // with respect to the CSS3 equivalent formulation:
                    frameTop    = max(borderWidthT, max(borderRadiusTL, borderRadiusTR));
                    frameRight  = max(borderWidthR, max(borderRadiusTR, borderRadiusBR));
                    frameBottom = max(borderWidthB, max(borderRadiusBL, borderRadiusBR));
                    frameLeft   = max(borderWidthL, max(borderRadiusTL, borderRadiusBL));
    
                    frameInfo = {
                        table: info[0].charAt(0) === 't',
                        vertical: info[0].charAt(1) === 'v',
    
                        top: frameTop,
                        right: frameRight,
                        bottom: frameBottom,
                        left: frameLeft,
    
                        width: frameLeft + frameRight,
                        height: frameTop + frameBottom,
    
                        maxWidth: max(frameTop, frameRight, frameBottom, frameLeft),
    
                        border: {
                            top:    borderWidthT,
                            right:  borderWidthR,
                            bottom: borderWidthB,
                            left:   borderWidthL,
                            width:  borderWidthL + borderWidthR,
                            height: borderWidthT + borderWidthB
                        },
                        padding: {
                            top:    paddingT,
                            right:  paddingR,
                            bottom: paddingB,
                            left:   paddingL,
                            width:  paddingL + paddingR,
                            height: paddingT + paddingB
                        },
                        radius: {
                            tl: borderRadiusTL,
                            tr: borderRadiusTR,
                            br: borderRadiusBR,
                            bl: borderRadiusBL
                        }
                    };
                } else {
                    frameInfo = false;
                }
            } else {
                frameInfo = false;
            }

            //<debug error>
            // This happens when you set frame: true explicitly without using the x-frame mixin in sass.
            // This way IE can't figure out what sizes to use and thus framing can't work.
            if (me.frame === true && !frameInfo) {
                Ext.log.error('You have set frame: true explicity on this component (' + me.getXType() + ') and it ' +
                        'does not have any framing defined in the CSS template. In this case IE cannot figure out ' +
                        'what sizes to use and thus framing on this component will be disabled.');
            }
            //</debug>

            frameInfoCache[cls] = frameInfo;
        }

        me.frame = !!frameInfo;
        me.frameSize = frameInfo;

        return frameInfo;
    },
    
    getFramingInfoCls: function(){
        return this.baseCls + '-' + this.ui;
    }
});

Finally, I combined these things in the sample:
https://s83470.gridserver.com/

And it appears to help remedy the problem with a small button and quick tips.

The problems are:

1. Needs to override many other problematic CSS rules. As I said, it is going to be complicated.
2. I am not 100% sure that the AbstractComponent override doesn't break something else.

As a conclusion, I see a little hope to get it fixed unless updating to ExtJS 4.2.1 beta.

[jchau]

When will 4.2.1 be available in SVN?

[jchau]

After talking to our management team, there's no way we can update to 4.2.1 this close to our release. We have been burnt too many times with upgrading to next version. From their perspective, https support for IE is a critical feature for ANY enterprise application that should work without this much hassle. Please provide a suitable workaround for 4.2.0 or a patch to 4.2.0.