Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix various ImageDiff/SVG bugs #23312

Merged
merged 8 commits into from
Mar 7, 2023
Merged

Fix various ImageDiff/SVG bugs #23312

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
68e1b6a
fix
wxiaoguang Mar 5, 2023
be77cb8
add more SVG checks, remove unnecessary `<svg/>` test case
wxiaoguang Mar 5, 2023
b185941
add tests
wxiaoguang Mar 5, 2023
ef6be0d
add comments
wxiaoguang Mar 7, 2023
b741a0a
Merge branch 'main' into fix-svg
wxiaoguang Mar 7, 2023
409ad49
remove the close tag check
wxiaoguang Mar 7, 2023
7871171
add one more test
wxiaoguang Mar 7, 2023
8fd7e09
Merge branch 'main' into fix-svg
lunny Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 19 additions & 6 deletions modules/typesniffer/typesniffer.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
package typesniffer

import (
"bytes"
"fmt"
"io"
"net/http"
Expand All @@ -24,8 +25,9 @@ const (
)

var (
svgTagRegex = regexp.MustCompile(`(?si)\A\s*(?:(<!--.*?-->|<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg[\s>\/]`)
svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(<!--.*?-->|<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg[\s>\/]`)
svgComment = regexp.MustCompile(`(?s)<!--.*?-->`)
svgTagRegex = regexp.MustCompile(`(?si)\A\s*(?:(<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg\b`)
svgTagInXMLRegex = regexp.MustCompile(`(?si)\A<\?xml\b.*?\?>\s*(?:(<!DOCTYPE\s+svg([\s:]+.*?>|>))\s*)*<svg\b`)
)

// SniffedType contains information about a blobs type.
Expand Down Expand Up @@ -79,6 +81,8 @@ func (ct SniffedType) GetMimeType() string {
return strings.SplitN(ct.contentType, ";", 2)[0]
}

var svgCloseTag = []byte("</svg>")

// DetectContentType extends http.DetectContentType with more content types. Defaults to text/unknown if input is empty.
func DetectContentType(data []byte) SniffedType {
if len(data) == 0 {
Expand All @@ -91,10 +95,19 @@ func DetectContentType(data []byte) SniffedType {
data = data[:sniffLen]
}

if (strings.Contains(ct, "text/plain") || strings.Contains(ct, "text/html")) && svgTagRegex.Match(data) ||
strings.Contains(ct, "text/xml") && svgTagInXMLRegex.Match(data) {
// SVG is unsupported. https://github.com/golang/go/issues/15888
ct = SvgMimeType
// SVG is unsupported by http.DetectContentType, https://github.com/golang/go/issues/15888

detectByHTML := strings.Contains(ct, "text/plain") || strings.Contains(ct, "text/html")
detectByXML := strings.Contains(ct, "text/xml")
if detectByHTML || detectByXML {
dataProcessed := svgComment.ReplaceAll(data, nil)
dataProcessed = bytes.TrimSpace(dataProcessed)
if bytes.HasSuffix(dataProcessed, svgCloseTag) {
if detectByHTML && svgTagRegex.Match(dataProcessed) ||
detectByXML && svgTagInXMLRegex.Match(dataProcessed) {
ct = SvgMimeType
}
}
}

return SniffedType{ct}
Expand Down
24 changes: 23 additions & 1 deletion modules/typesniffer/typesniffer_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ func TestIsSvgImage(t *testing.T) {
assert.True(t, DetectContentType([]byte("<svg></svg>")).IsSvgImage())
assert.True(t, DetectContentType([]byte(" <svg></svg>")).IsSvgImage())
assert.True(t, DetectContentType([]byte(`<svg width="100"></svg>`)).IsSvgImage())
assert.True(t, DetectContentType([]byte("<svg/>")).IsSvgImage())
assert.True(t, DetectContentType([]byte(`<?xml version="1.0" encoding="UTF-8"?><svg></svg>`)).IsSvgImage())
assert.True(t, DetectContentType([]byte(`<!-- Comment -->
<svg></svg>`)).IsSvgImage())
Expand Down Expand Up @@ -68,6 +67,29 @@ func TestIsSvgImage(t *testing.T) {
assert.False(t, DetectContentType([]byte(`<?xml version="1.0" encoding="UTF-8"?>
<!-- <svg></svg> inside comment -->
<foo></foo>`)).IsSvgImage())

assert.False(t, DetectContentType([]byte(`<svg></svg><span></span>`)).IsSvgImage())
assert.False(t, DetectContentType([]byte(`<svg></svg>text`)).IsSvgImage())

assert.False(t, DetectContentType([]byte(`
<!-- comment1 -->
<div>
<!-- comment2 -->
<svg></svg>
</div>
`)).IsSvgImage())

assert.False(t, DetectContentType([]byte(`
<!-- comment1
-->
<div>
<!-- comment2
-->
<svg></svg>
</div>
`)).IsSvgImage())
assert.False(t, DetectContentType([]byte(`<html><body><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg></svg></body></html>`)).IsSvgImage())
assert.False(t, DetectContentType([]byte(`<html><body><?xml version="1.0" encoding="UTF-8"?><svg></svg></body></html>`)).IsSvgImage())
}

func TestIsPDF(t *testing.T) {
Expand Down
13 changes: 5 additions & 8 deletions web_src/js/features/imagediff.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,8 @@ export function initImageDiff() {
initOverlay(createContext($imageAfter[2], $imageBefore[2]));
}

hideElem($container.find('> .loader'));
$container.find('> .gt-hidden').removeClass('gt-hidden');
hideElem($container.find('.ui.loader'));
}

function initSideBySide(sizes) {
Expand All @@ -155,7 +155,7 @@ export function initImageDiff() {
height: sizes.size1.height * factor
});
sizes.image1.parent().css({
margin: `${sizes.ratio[1] * factor + 15}px ${sizes.ratio[0] * factor}px ${sizes.ratio[1] * factor}px`,
margin: `10px auto`,
width: sizes.size1.width * factor + 2,
height: sizes.size1.height * factor + 2
});
Expand All @@ -164,7 +164,7 @@ export function initImageDiff() {
height: sizes.size2.height * factor
});
sizes.image2.parent().css({
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
margin: `10px auto`,
width: sizes.size2.width * factor + 2,
height: sizes.size2.height * factor + 2
});
Expand Down Expand Up @@ -255,13 +255,10 @@ export function initImageDiff() {
width: sizes.size2.width * factor + 2,
height: sizes.size2.height * factor + 2
});

sizes.image2.parent().parent().css({
width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 2
});
$container.find('.onion-skin').css({
width: sizes.max.width * factor + 2,
height: sizes.max.height * factor + 4
height: sizes.max.height * factor + 2 + 20,
wxiaoguang marked this conversation as resolved.
Show resolved Hide resolved
});

const $range = $container.find("input[type='range']");
Expand Down
5 changes: 3 additions & 2 deletions web_src/less/features/imagediff.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.image-diff-container {
text-align: center;
padding: 30px 0;
padding: 1em 0;

img {
border: 1px solid var(--color-primary-light-7);
Expand All @@ -22,6 +22,7 @@
display: inline-block;
line-height: 0;
vertical-align: top;
margin: 0 1em;

.side-header {
font-weight: bold;
Expand Down Expand Up @@ -98,7 +99,7 @@
}

input {
width: 300px;
max-width: 300px;
}
}
}