Commit 0371f346 authored by Benni Mack's avatar Benni Mack Committed by Georg Ringer
Browse files

[!!!][BUGFIX] Do not render type attribute for style and link tags

It is recommended for <style> and <link> HTML tags
to not use the "type" attribute anymore.

Details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

The patch drops the attribute from rendering. The patch is
marked as a breaking since it changes frontend output.

Resolves: #45512
Releases: master
Change-Id: I073d7ef6c40a824755768d33fcc71c9f26090801
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/65548


Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Georg Ringer's avatarGeorg Ringer <georg.ringer@gmail.com>
parent c2942387
......@@ -81,7 +81,7 @@ class ResourceUtility
$result = '';
if (!empty($GLOBALS['TBE_STYLES']['stylesheets']['admPanel'])) {
$stylesheet = GeneralUtility::locationHeaderUrl($GLOBALS['TBE_STYLES']['stylesheets']['admPanel']);
$result = '<link rel="stylesheet" type="text/css" href="' .
$result = '<link rel="stylesheet" href="' .
htmlspecialchars($stylesheet, ENT_QUOTES | ENT_HTML5) . '" />';
}
return $result;
......@@ -95,7 +95,7 @@ class ResourceUtility
*/
protected static function getCssTag(string $cssFileLocation): string
{
$css = '<link type="text/css" rel="stylesheet" href="' .
$css = '<link rel="stylesheet" href="' .
htmlspecialchars(
PathUtility::getAbsoluteWebPath(GeneralUtility::getFileAbsFileName($cssFileLocation)),
ENT_QUOTES | ENT_HTML5
......
......@@ -92,7 +92,6 @@ class AssetRenderer
foreach ($assets as &$assetData) {
$assetData['attributes']['href'] = $this->getAbsoluteWebPath($assetData['source']);
$assetData['attributes']['rel'] = $assetData['attributes']['rel'] ?? 'stylesheet';
$assetData['attributes']['type'] = $assetData['attributes']['type'] ?? 'text/css';
}
return $this->render($assets, $template);
}
......
......@@ -348,7 +348,7 @@ class PageRenderer implements SingletonInterface
'/*]]>*/' . LF . '</script>' . LF
];
$this->inlineCssWrap = [
'<style type="text/css">' . LF . '/*<![CDATA[*/' . LF . '<!-- ' . LF,
'<style>' . LF . '/*<![CDATA[*/' . LF . '<!-- ' . LF,
'-->' . LF . '/*]]>*/' . LF . '</style>' . LF
];
......@@ -2125,7 +2125,7 @@ class PageRenderer implements SingletonInterface
} else {
$href = $this->getStreamlinedFileName($file);
$tag = '<link rel="' . htmlspecialchars($properties['rel'])
. '" type="text/css" href="' . htmlspecialchars($href)
. '" href="' . htmlspecialchars($href)
. '" media="' . htmlspecialchars($properties['media']) . '"'
. ($properties['title'] ? ' title="' . htmlspecialchars($properties['title']) . '"' : '')
. $this->endingSlash . '>';
......@@ -2700,7 +2700,7 @@ class PageRenderer implements SingletonInterface
return '';
}
$cssInlineFix = $this->getPathFixer()->fixRelativeUrlPaths($cssInline, '/' . PathUtility::dirname($file) . '/');
return '<style type="text/css"'
return '<style'
. ' media="' . htmlspecialchars($properties['media']) . '"'
. ($properties['title'] ? ' title="' . htmlspecialchars($properties['title']) . '"' : '')
. '>' . LF
......
.. include:: ../../Includes.txt
=============================================================
Breaking: #45512 - No type attributes for style and link tags
=============================================================
See :issue:`45512`
Description
===========
It is recommended for `<style>` and `<link>` HTML tags
to not use the "type" attribute anymore.
These references state its recommended practice to omit them:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
For this reason, TYPO3 does not add this "type" attribute to the mentioned
HTML elements anymore when rendering HTML.
Impact
======
The attribute `type` is removed from the HTML tags `<style>` and `<link>`
by default for TYPO3 Backend and Frontend output.
Affected Installations
======================
All installations of TYPO3 that use `<style>` or `<link>` tags are affected.
The probability this has negative impact on the user experience is low, however.
Migration
=========
If requested due to very old browser requirements for TYPO3 Frontend,
the type attribute can be added via TypoScript options or Fluid
AssetCollector attributes again.
.. index:: Backend, Frontend, NotScanned, ext:core
......@@ -97,7 +97,7 @@ class PageRendererTest extends FunctionalTestCase
$subject->addJsInlineCode(StringUtility::getUniqueId(), $jsInlineCode);
$cssFile = StringUtility::getUniqueId('cssFile-');
$expectedCssFileString = 'wrapBefore<link rel="stylesheet" type="text/css" href="' . $cssFile . '" media="print" />wrapAfter';
$expectedCssFileString = 'wrapBefore<link rel="stylesheet" href="' . $cssFile . '" media="print" />wrapAfter';
$subject->addCssFile($cssFile, 'stylesheet', 'print', '', true, false, 'wrapBeforeXwrapAfter', false, 'X');
$expectedCssInlineBlockOnTopString = '/*general3*/' . LF . 'h1 {margin:20px;}' . LF . '/*general2*/' . LF . 'body {margin:20px;}';
......
......@@ -37,7 +37,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="fileadmin/foo.ext"></script>',
'js_prio' => '',
......@@ -55,7 +55,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="typo3/sysext/core/Resource/Public/foo.ext"></script>',
'js_prio' => '',
......@@ -73,7 +73,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="&quot;&gt;&lt;script&gt;alert(1)&lt;/script&gt;&lt;x &quot;" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="&quot;&gt;&lt;script&gt;alert(1)&lt;/script&gt;&lt;x &quot;" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="&quot;&gt;&lt;script&gt;alert(1)&lt;/script&gt;&lt;x &quot;"></script>',
'js_prio' => '',
......@@ -91,7 +91,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="https://typo3.org/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="https://typo3.org/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="https://typo3.org/foo.ext"></script>',
'js_prio' => '',
......@@ -109,7 +109,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="https://typo3.org/foo.ext?foo=bar" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="https://typo3.org/foo.ext?foo=bar" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="https://typo3.org/foo.ext?foo=bar"></script>',
'js_prio' => '',
......@@ -127,7 +127,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="https://typo3.org/foo.ext?foo=bar&amp;bar=baz" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="https://typo3.org/foo.ext?foo=bar&amp;bar=baz" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="https://typo3.org/foo.ext?foo=bar&amp;bar=baz"></script>',
'js_prio' => '',
......@@ -151,7 +151,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" type="text/css" >' . LF . '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" >' . LF . '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="fileadmin/foo.ext"></script>' . LF . '<script src="typo3/sysext/core/Resource/Public/foo.ext"></script>',
'js_prio' => '',
......@@ -176,7 +176,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="typo3/sysext/core/Resource/Public/bar.ext" rel="stylesheet" type="text/css" >' . LF . '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="typo3/sysext/core/Resource/Public/bar.ext" rel="stylesheet" >' . LF . '<link href="typo3/sysext/core/Resource/Public/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="typo3/sysext/core/Resource/Public/bar.ext"></script>' . LF . '<script src="typo3/sysext/core/Resource/Public/foo.ext"></script>',
'js_prio' => '',
......@@ -196,7 +196,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link rel="foo" href="fileadmin/foo.ext" type="text/css" >',
'css_no_prio' => '<link rel="foo" href="fileadmin/foo.ext" >',
'css_prio' => '',
'js_no_prio' => '<script rel="foo" src="fileadmin/foo.ext"></script>',
'js_prio' => '',
......@@ -238,7 +238,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link rel="bar" another="keep on override" href="fileadmin/foo.ext" type="text/css" >',
'css_no_prio' => '<link rel="bar" another="keep on override" href="fileadmin/foo.ext" >',
'css_prio' => '',
'js_no_prio' => '<script rel="bar" another="keep on override" src="fileadmin/foo.ext"></script>',
'js_prio' => '',
......@@ -259,7 +259,7 @@ class AssetDataProvider
],
[
'css_no_prio' => '',
'css_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" type="text/css" >',
'css_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" >',
'js_no_prio' => '',
'js_prio' => '<script src="fileadmin/foo.ext"></script>',
]
......@@ -280,7 +280,7 @@ class AssetDataProvider
]
],
[
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" type="text/css" >',
'css_no_prio' => '<link href="fileadmin/foo.ext" rel="stylesheet" >',
'css_prio' => '',
'js_no_prio' => '<script src="fileadmin/foo.ext"></script>',
'js_prio' => '',
......
......@@ -550,7 +550,7 @@ class DebuggerUtility
$css = '';
if (!$plainText && self::$stylesheetEchoed === false) {
$css = '
<style type=\'text/css\'>
<style>
.extbase-debugger-tree{position:relative}
.extbase-debugger-tree input{position:absolute !important;float: none !important;top:0;left:0;height:14px;width:14px;margin:0 !important;cursor:pointer;opacity:0;z-index:2}
.extbase-debugger-tree input~.extbase-debug-content{display:none}
......
......@@ -16,7 +16,7 @@
<title>powermail</title>
<meta name="generator" content="TYPO3 10.4 CMS">
<link rel="stylesheet" type="text/css" href="typo3temp/assets/css/427bb03fe1.css?1334416344" media="all">
<link rel="stylesheet" href="typo3temp/assets/css/427bb03fe1.css?1334416344" media="all">
......
......@@ -127,7 +127,7 @@ class IndexerTest extends UnitTestCase
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Some Title</title>
<link href='css/normalize.css' rel='stylesheet' type='text/css'/>
<link href='css/normalize.css' rel='stylesheet'/>
</head>
<body>
<div>
......@@ -171,7 +171,7 @@ EOT;
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Some Title</title>
<link href='css/normalize.css' rel='stylesheet' type='text/css'/>
<link href='css/normalize.css' rel='stylesheet'/>
</head>
<body>
<div>
......
......@@ -4,7 +4,7 @@
<title>Installing TYPO3 CMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path: 'Css/backend.css', extensionName: 'backend')}?{bust}" />
<link rel="stylesheet" href="{f:uri.resource(path: 'Css/backend.css', extensionName: 'backend')}?{bust}" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{f:uri.resource(path: 'Icons/favicon.ico')}?{bust}" />
<script>
var __bust = '{bust}';
......
......@@ -4,7 +4,7 @@
<title>Install Tool on site {siteName}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="{f:uri.resource(path: 'Css/backend.css', extensionName: 'backend')}?{bust}" />
<link rel="stylesheet" href="{f:uri.resource(path: 'Css/backend.css', extensionName: 'backend')}?{bust}" />
<link rel="icon" type="image/vnd.microsoft.icon" href="{f:uri.resource(path: 'Icons/favicon.ico')}?{bust}" />
<script>
var TYPO3 = TYPO3 || {};
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment