JavaScript error when clicking on logo

[liviuconcioiu]

Describe the bug

A JavaScript exception is thrown when the logo link is changed to another domain name.

To Reproduce

Steps to reproduce the behavior:

1. Go to Navigation panel settings
2. Scroll down to Logo link URL
3. Enter https://www.test.com/
4. Click on Apply
5. Click on phpMyAdmin logo.
6. See error

Expected behavior

The JavaScript exception shouldn't be thrown.

Server configuration

• Operating system: Windows
• Web server: nginx/1.19.8
• Database version: 5.7.32
• PHP version: 8.0.3
• phpMyAdmin version: 5.2.0-dev+20210331.1bfaec1351

Client configuration

• Browser: Firefox
• Operating system: Windows

Additional context

{
    "pma_version": "5.2.0-dev+20210331.1bfaec1351",
    "browser_name": "FIREFOX",
    "browser_version": "89.0",
    "user_os": "Win",
    "server_software": "nginx/1.19.8",
    "user_agent_string": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0",
    "locale": "en",
    "configuration_storage": "enabled",
    "php_version": "8.0.3",
    "script_name": "index.php",
    "exception_type": "js",
    "exception": {
        "mode": "stack",
        "name": "SecurityError",
        "message": "The operation is insecure.",
        "stack": [
            {
                "func": "requestHandler",
                "line": "348",
                "column": "17",
                "context": [
                    "      if (previousLinkAborted) {",
                    "        // hack: there is already an aborted entry on stack",
                    "        // so just modify the aborted one",
                    "        history.replaceState(state, null, href);",
                    "      } else {",
                    "        history.pushState(state, null, href);",
                    "      }",
                    "    } else {",
                    "      /**",
                    "       * Manually fire the onsubmit event for the form, if any.",
                    "       * The event was saved in the jQuery data object by an onload"
                ],
                "uri": "js/dist/ajax.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/dist/ajax.js"
            },
            {
                "func": "dispatch",
                "line": "2",
                "column": "43064",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "$event.dispatch",
                "line": "373",
                "column": "21",
                "context": [
                    "  $event.dispatch = function( event ){",
                    "  \tif ( $.data( this, \"suppress.\"+ event.type ) - new Date().getTime() > 0 ){",
                    "  \t\t$.removeData( this, \"suppress.\"+ event.type );",
                    "  \t\treturn;",
                    "  \t}",
                    "  \treturn $dispatch.apply( this, arguments );",
                    "  };",
                    "",
                    "  // event fix hooks for touch events...",
                    "  var touchHooks =",
                    "  $event.fixHooks.touchstart ="
                ],
                "uri": "js/vendor/jquery/jquery.event.drag-2.2.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.event.drag-2.2.js"
            },
            {
                "func": "add/v.handle",
                "line": "2",
                "column": "41048",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "EventListener.handleEvent*add",
                "line": "2",
                "column": "41515",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "jQuery.event.add",
                "line": "642",
                "column": "21",
                "context": [
                    "",
                    "\t// This misses the multiple-types case but that seems awfully rare",
                    "\tif ( elem === window && types === \"load\" && window.document.readyState ===//...",
                    "\t\tmigrateWarn( \"jQuery(window).on('load'...) called after load event occurr//...",
                    "\t}",
                    "\treturn oldEventAdd.apply( this, arguments );",
                    "};",
                    "",
                    "jQuery.each( [ \"load\", \"unload\", \"error\" ], function( _, name ) {",
                    "",
                    "\tjQuery.fn[ name ] = function() {"
                ],
                "uri": "js/vendor/jquery/jquery-migrate.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery-migrate.js"
            },
            {
                "func": "Ee/<",
                "line": "2",
                "column": "40109",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "each",
                "line": "2",
                "column": "3003",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "each",
                "line": "2",
                "column": "1481",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "Ee",
                "line": "2",
                "column": "40085",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "on",
                "line": "2",
                "column": "46578",
                "context": [
                    "/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.o//...",
                    "!function(e,t){\"use strict\";\"object\"==typeof module&&\"object\"==typeof modul//...",
                    ""
                ],
                "uri": "js/vendor/jquery/jquery.min.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/vendor/jquery/jquery.min.js"
            },
            {
                "func": "?",
                "line": "933",
                "column": "13",
                "context": [
                    "/**",
                    " * Attach a generic event handler to clicks",
                    " * on pages and submissions of forms",
                    " */",
                    "",
                    "$(document).on('click', 'a', AJAX.requestHandler);",
                    "$(document).on('submit', 'form', AJAX.requestHandler);",
                    "/**",
                    " * Gracefully handle fatal server errors",
                    " * (e.g: 500 - Internal server error)",
                    " */"
                ],
                "uri": "js/dist/ajax.js?v=5.2.0-dev%2B20210331.1bfaec1351",
                "scriptname": "js/dist/ajax.js"
            }
        ],
        "uri": "index.php?route=%2Fserver%2Fengines"
    }
}

[lem9]

Problem also present in 5.1.0 and 5.1.1-dev, but the feature worked fine in 4.9.7.

[williamdes]

I pushed two fixes for this issue (f0e29f3 and 2b42dc9), for me the user needs to adjust the CSP value to allow external links if not using the mode NavigationLogoLinkWindow=new

@lem9 @ibennetch let me know if you find that okay to ask the user to adjust the CSP value or should we do some smart detection but that would widen the security without the user knowing about it.

Example: user sets NavigationLogoLink to a malicious website, we smart detect the url and allow it in CSP. Hacker finds a way to inject a script on website of the url and to make phpmyadmin inject the remote script.

Using an external URL without adjusting CSP

$cfg['NavigationLogoLinkWindow'] = 'new';
$cfg['NavigationLogoLink'] = 'https://www.test.com/';

Using an external URL with adjusted CSP

$cfg['NavigationLogoLinkWindow'] = 'main';
$cfg['NavigationLogoLink'] = 'https://www.test.com/';
$cfg['CSPAllow'] = 'https://www.test.com/';

Using an internal URL

$cfg['NavigationLogoLinkWindow'] = 'main';
$cfg['NavigationLogoLink'] = './index.php?route=/server/sql';

[williamdes]

Some documentation was added about the CSP issue