解决IE11中拦截修改XMLHttpRequest响应的只读属性报错问题

IE11 has some quirky behavior when handling XMLHttpRequest properties compared to modern browsers. The error you're seeing happens because even when you attempt to mark the response property as writable, IE11's strict mode enforcement blocks direct assignment—this stems from how the older Trident engine handles internal property attributes.

The Solution: Use Getters to Override Response Access #

Instead of trying to reassign the read-only response property directly, we can create a wrapper that captures the raw response, modifies it, then overrides the properties that expose the response content using getter functions. This approach works in IE11 and all modern browsers:

(function() {
    const originalSend = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function() {
        // Save the original ready state handler
        const originalOnReadyStateChange = this.onreadystatechange;
        // Store our modified response data
        let modifiedResponse = null;

        this.onreadystatechange = function() {
            if (this.readyState === 4) {
                if (this.status === 200 || this.status === 1223) {
                    // Grab the raw response text and apply your modification logic
                    const rawData = this.responseText;
                    modifiedResponse = modifyResponse(rawData);

                    // Override responseText to return our modified content
                    Object.defineProperty(this, 'responseText', {
                        get: () => modifiedResponse,
                        configurable: true
                    });

                    // Override response property (handles parsed JSON cases)
                    Object.defineProperty(this, 'response', {
                        get: () => {
                            // Try parsing as JSON if needed, fall back to raw text
                            try {
                                return JSON.parse(modifiedResponse);
                            } catch (e) {
                                return modifiedResponse;
                            }
                        },
                        configurable: true
                    });
                }
            }

            // Execute the original handler if it exists
            if (originalOnReadyStateChange) {
                originalOnReadyStateChange.apply(this, arguments);
            }
        };

        originalSend.apply(this, arguments);
    };
})();

// Replace this with your actual decryption/modification logic
function modifyResponse(rawContent) {
    // Example: Replace placeholder text with modified content
    return rawContent.replace('encrypted_content', 'decrypted_content');
}

Why This Works for IE11 #

• IE11 respects the configurable flag when defining property getters, letting us override response and responseText without triggering strict mode errors.
• We avoid direct assignment to the read-only response property entirely, instead serving our modified data whenever the property is accessed.
• The original onreadystatechange handler is preserved, ensuring existing application logic continues to function as expected.

Key Considerations #

• If working with binary data (like blob or arraybuffer), adjust the logic to handle responseType explicitly—this example focuses on text/JSON responses, the most common use case.
• Ensure your modifyResponse function processes responseText directly, as IE11 doesn’t automatically parse JSON into the response property like modern browsers do.

内容的提问来源于stack exchange，提问作者Mukesh Yadav