rewrite HTML escaping in post building

This commit is contained in:
ccd0 2014-05-15 17:02:17 -07:00
parent e74fc2765a
commit 05014b7f13
5 changed files with 154 additions and 165 deletions

View File

@ -1,10 +1,14 @@
Build =
staticPath: '//s.4cdn.org/image/'
gifIcon: if window.devicePixelRatio >= 2 then '@2x.gif' else '.gif'
h_staticPath: '//s.4cdn.org/image/'
h_gifIcon: if window.devicePixelRatio >= 2 then '@2x.gif' else '.gif'
spoilerRange: {}
escape: (name) ->
name.replace /[&"'<>]/g, (c) ->
{'&': '&amp;', "'": '&#39;', '"': '&quot;', '<': '&lt;', '>': '&gt;'}[c]
h_escape: (text) ->
(text+'').replace /[&"'<>]/g, (c) ->
{'&': '&amp;', "'": '&#039;', '"': '&quot;', '<': '&lt;', '>': '&gt;'}[c]
unescape: (text) ->
return text unless text?
text.replace /&(amp|#039|quot|lt|gt);/g, (c) ->
{'&amp;': '&', '&#039;': "'", '&quot;': '"', '&lt;': '<', '&gt;': '>'}[c]
shortFilename: (filename, isReply) ->
# FILENAME SHORTENING SCIENCE:
# OPs have a +10 characters threshold.
@ -25,27 +29,30 @@ Build =
threadID: data.resto or data.no
boardID: boardID
# info
name: data.name
name: Build.unescape data.name
capcode: data.capcode
tripcode: data.trip
uniqueID: data.id
email: if data.email then encodeURI data.email.replace /&quot;/g, '"' else ''
subject: data.sub
email: Build.unescape data.email
subject: Build.unescape data.sub
flagCode: data.country
flagName: data.country_name
flagName: Build.unescape data.country_name
date: data.now
dateUTC: data.time
comment: data.com
h_comment: data.com or ''
# thread status
isSticky: !!data.sticky
isClosed: !!data.closed
# file
if data.ext or data.filedeleted
if data.filedeleted
o.file =
name: data.filename + data.ext
isDeleted: true
else if data.ext
o.file =
name: (Build.unescape data.filename) + data.ext
timestamp: "#{data.tim}#{data.ext}"
url: if boardID is 'f'
"//i.4cdn.org/#{boardID}/#{encodeURIComponent data.filename}#{data.ext}".replace /'/g, '&#39;'
"//i.4cdn.org/#{boardID}/#{encodeURIComponent data.filename}#{data.ext}"
else
"//i.4cdn.org/#{boardID}/#{data.tim}#{data.ext}"
height: data.h
@ -56,144 +63,146 @@ Build =
theight: data.tn_h
twidth: data.tn_w
isSpoiler: !!data.spoiler
isDeleted: !!data.filedeleted
isDeleted: false
Build.post o
post: (o, isArchived) ->
###
This function contains code from 4chan-JS (https://github.com/4chan/4chan-JS).
@license: https://github.com/4chan/4chan-JS/blob/master/LICENSE
###
E = Build.h_escape
{
postID, threadID, boardID
name, capcode, tripcode, uniqueID, email, subject, flagCode, flagName, date, dateUTC
isSticky, isClosed
comment
h_comment
file
} = o
name or= ''
subject or= ''
isOP = postID is threadID
{staticPath, gifIcon} = Build
{h_staticPath, h_gifIcon} = Build
tripcode = if tripcode
" <span class=postertrip>#{tripcode}</span>"
if isOP
h_sideArrows = ''
else
''
h_sideArrows = "<div class='sideArrows' id='sa#{+postID}'>&gt;&gt;</div>"
h_postClass = "post #{if isOP then 'op' else 'reply'}#{if capcode is 'admin_highlight' then ' highlightPost' else ''}"
if tripcode
h_tripcode = " <span class='postertrip'>#{E tripcode}</span>"
else
h_tripcode = ''
if email
emailStart = '<a href="mailto:' + email + '" class="useremail">'
emailEnd = '</a>'
h_emailStart = "<a href='mailto:#{E encodeURIComponent(email)}' class='useremail'>"
h_emailEnd = '</a>'
else
emailStart = ''
emailEnd = ''
h_emailStart = ''
h_emailEnd = ''
switch capcode
when 'admin', 'admin_highlight'
capcodeClass = " capcodeAdmin"
capcodeStart = " <strong class='capcode hand id_admin'" +
"title='Highlight posts by the Administrator'>## Admin</strong>"
capcodeIcon = " <img src='#{staticPath}adminicon#{gifIcon}' " +
"title='This user is the 4chan Administrator.' class=identityIcon>"
h_capcodeClass = ' capcodeAdmin'
h_capcodeStart = ' <strong class="capcode hand id_admin" title="Highlight posts by the Administrator">## Admin</strong>'
h_capcodeIcon = " <img src='#{h_staticPath}adminicon#{h_gifIcon}' title='This user is the 4chan Administrator.' class='identityIcon'>"
when 'mod'
capcodeClass = " capcodeMod"
capcodeStart = " <strong class='capcode hand id_mod' " +
"title='Highlight posts by Moderators'>## Mod</strong>"
capcodeIcon = " <img src='#{staticPath}modicon#{gifIcon}' " +
"title='This user is a 4chan Moderator.' class=identityIcon>"
h_capcodeClass = ' capcodeMod'
h_capcodeStart = ' <strong class="capcode hand id_mod" title="Highlight posts by Moderators">## Mod</strong>'
h_capcodeIcon = " <img src='#{h_staticPath}modicon#{h_gifIcon}' title='This user is a 4chan Moderator.' class='identityIcon'>"
when 'developer'
capcodeClass = " capcodeDeveloper"
capcodeStart = " <strong class='capcode hand id_developer' " +
"title='Highlight posts by Developers'>## Developer</strong>"
capcodeIcon = " <img src='#{staticPath}developericon#{gifIcon}' " +
"title='This user is a 4chan Developer.' class=identityIcon>"
h_capcodeClass = ' capcodeDeveloper'
h_capcodeStart = ' <strong class="capcode hand id_developer" title="Highlight posts by Developers">## Developer</strong>'
h_capcodeIcon = " <img src='#{h_staticPath}developericon#{h_gifIcon}' title='This user is a 4chan Developer.' class='identityIcon'>"
else
capcodeClass = ''
capcodeStart = ''
capcodeIcon = ''
h_capcodeClass = ''
h_capcodeStart = ''
h_capcodeIcon = ''
userID =
if !capcode and uniqueID
" <span class='posteruid id_#{uniqueID}'>(ID: " +
"<span class=hand title='Highlight posts by this ID'>#{uniqueID}</span>)</span> "
else
''
flag = unless flagCode
''
else if boardID is 'pol'
" <img src='#{staticPath}country/troll/#{flagCode.toLowerCase()}.gif' alt=#{flagCode} title='#{flagName}' class=countryFlag>"
if !capcode and uniqueID
h_userID = " <span class='posteruid id_#{E uniqueID}'>(ID: <span class='hand' title='Highlight posts by this ID'>#{E uniqueID}</span>)</span> "
else
" <span title='#{flagName}' class='flag flag-#{flagCode.toLowerCase()}'></span>"
h_userID = ''
unless flagCode
h_flag = ''
else if boardID is 'pol'
h_flag = " <img src='#{h_staticPath}country/troll/#{E flagCode.toLowerCase()}.gif' alt='#{E flagCode}' title='#{E flagName}' class='countryFlag'>"
else
h_flag = " <span title='#{E flagName}' class='flag flag-#{E flagCode.toLowerCase()}'></span>"
if file?.isDeleted
fileHTML = if isOP
"<div class=file id=f#{postID}><span class=fileThumb>" +
"<img src='#{staticPath}filedeleted#{gifIcon}' alt='File deleted.' class=fileDeleted>" +
"</span></div>"
if isOP
h_file = "<div class='file' id='f#{+postID}'><span class='fileThumb'>"
h_file += "<img src='#{h_staticPath}filedeleted#{h_gifIcon}' alt='File deleted.' class='fileDeleted'>"
h_file += '</span></div>'
else
"<div class=file id=f#{postID}><span class=fileThumb>" +
"<img src='#{staticPath}filedeleted-res#{gifIcon}' alt='File deleted.' class=fileDeletedRes>" +
"</span></div>"
h_file = "<div class='file' id='f#{+postID}'><span class='fileThumb'>"
h_file += "<img src='#{h_staticPath}filedeleted-res#{h_gifIcon}' alt='File deleted.' class='fileDeletedRes'>"
h_file += '</span></div>'
else if file
fileSize = $.bytesToString file.size
fileThumb = file.turl
if file.isSpoiler
fileSize = "Spoiler Image, #{fileSize}"
unless isArchived
fileThumb = "#{staticPath}spoiler"
fileThumb = "#{h_staticPath}spoiler"
if spoilerRange = Build.spoilerRange[boardID]
# Randomize the spoiler image.
fileThumb += "-#{boardID}" + Math.floor 1 + spoilerRange * Math.random()
fileThumb += '.png'
file.twidth = file.theight = 100
shortFilename = Build.shortFilename file.name
imgSrc = if boardID is 'f'
''
if boardID is 'f'
h_imgSrc = ''
else
"<a class='fileThumb#{if file.isSpoiler then ' imgspoiler' else ''}' href='#{file.url}' target=_blank>" +
"<img src='#{fileThumb}' alt='#{fileSize}' data-md5=#{file.MD5} style='height: #{file.theight}px; width: #{file.twidth}px;'>" +
"</a>"
h_imgSrc = "<a class='fileThumb#{if file.isSpoiler then ' imgspoiler' else ''}' href='#{E file.url}' target='_blank'>"
h_imgSrc += "<img src='#{E fileThumb}' alt='#{E fileSize}' data-md5='#{E file.MD5}' style='height: #{+file.theight}px; width: #{+file.twidth}px;'>"
h_imgSrc += '</a>'
# html -> text, translate WebKit's %22s into "s
a = $.el 'a', innerHTML: file.name
filename = a.textContent.replace /%22/g, '"'
# shorten filename, get html
a.textContent = Build.shortFilename filename
shortFilename = a.innerHTML
# get html
a.textContent = filename
filename = a.innerHTML.replace /'/g, '&#39;'
if file.url[-4..] is '.pdf'
h_fileDims = 'PDF'
else
h_fileDims = "#{+file.width}x#{+file.height}"
h_fileInfo = "<div class='fileText' id='fT#{+postID}'"
if file.isSpoiler
h_fileInfo += " title='#{E file.name}'"
h_fileInfo += ">File: <a href='#{E file.url}' target='_blank'>#{E file.timestamp}</a>"
h_fileInfo += "-(#{E fileSize}, #{h_fileDims}"
unless file.isSpoiler
h_fileInfo += ", <span#{if file.name isnt shortFilename then " title='#{E file.name}'" else ''}>#{E shortFilename}</span>"
h_fileInfo += ')</div>'
fileDims = if file.name[-3..] is 'pdf' then 'PDF' else "#{file.width}x#{file.height}"
fileInfo = "<div class=fileText id=fT#{postID}#{if file.isSpoiler then " title='#{filename}'" else ''}>File: <a href='#{file.url}' target=_blank>#{file.timestamp}</a>" +
"-(#{fileSize}, #{fileDims}#{
if file.isSpoiler
''
else
", <span#{if filename isnt shortFilename then " title='#{filename}'" else ''}>#{shortFilename}</span>"
}" + ")</div>"
fileHTML = "<div class=file id=f#{postID}>#{fileInfo}#{imgSrc}</div>"
h_file = "<div class='file' id='f#{+postID}'>#{h_fileInfo}#{h_imgSrc}</div>"
else
fileHTML = ''
h_file = ''
sticky = if isSticky
" <img src=#{staticPath}sticky#{gifIcon} alt=Sticky title=Sticky class=stickyIcon>"
if g.VIEW is 'thread' and g.THREADID is +threadID
h_quoteLink = "javascript:quote(#{+postID})"
else
''
closed = if isClosed
" <img src=#{staticPath}closed#{gifIcon} alt=Closed title=Closed class=closedIcon>"
h_quoteLink = "/#{E boardID}/thread/#{+threadID}\#q#{+postID}"
if isSticky
h_sticky = " <img src='#{h_staticPath}sticky#{h_gifIcon}' alt='Sticky' title='Sticky' class='stickyIcon'>"
else
''
h_sticky = ''
if isClosed
h_closed = " <img src='#{h_staticPath}closed#{h_gifIcon}' alt='Closed' title='Closed' class='closedIcon'>"
else
h_closed = ''
if isOP and g.VIEW is 'index' and Conf['JSON Navigation']
pageNum = Math.floor Index.liveThreadIDs.indexOf(postID) / Index.threadsNumPerPage + 1
pageIcon = " <span class=page-num title='This thread is on page #{pageNum} in the original index.'>[#{pageNum}]</span>"
pageNum = Math.floor(Index.liveThreadIDs.indexOf(postID) / Index.threadsNumPerPage) + 1
h_pageIcon = " <span class='page-num' title='This thread is on page #{+pageNum} in the original index.'>[#{+pageNum}]</span>"
else
pageIcon = ''
h_pageIcon = ''
if isOP and g.VIEW is 'index'
replyLink = " &nbsp; <span>[<a href='/#{boardID}/thread/#{threadID}' class=replylink>Reply</a>]</span>"
h_replyLink = " &nbsp; <span>[<a href='/#{E boardID}/thread/#{+threadID}' class='replylink'>Reply</a>]</span>"
else
replyLink = ''
h_replyLink = ''
container = $.el 'div',
id: "pc#{postID}"

View File

@ -158,20 +158,20 @@ Get =
return
# convert comment to html
bq = $.el 'blockquote', textContent: data.comment # set this first to convert text to HTML entities
h_comment = Build.h_escape data.comment
# https://github.com/eksopl/fuuka/blob/master/Board/Yotsuba.pm#L413-452
# https://github.com/eksopl/asagi/blob/master/src/main/java/net/easymodo/asagi/Yotsuba.java#L109-138
bq.innerHTML = bq.innerHTML.replace ///
h_comment = h_comment.replace ///
\n
|
\[/?[a-z]+(:lit)?\]
///g, Get.parseMarkup
comment = bq.innerHTML
h_comment = h_comment
# greentext
.replace(/(^|>)(&gt;[^<$]*)(<|$)/g, '$1<span class=quote>$2</span>$3')
.replace(/(^|>)(&gt;[^<$]*)(<|$)/g, '$1<span class="quote">$2</span>$3')
# quotes
.replace /((&gt;){2}(&gt;\/[a-z\d]+\/)?\d+)/g, '<span class=deadlink>$1</span>'
.replace /((&gt;){2}(&gt;\/[a-z\d]+\/)?\d+)/g, '<span class="deadlink">$1</span>'
threadID = +data.thread_num
o =
@ -180,24 +180,24 @@ Get =
threadID: threadID
boardID: boardID
# info
name: data.name_processed
name: data.name
capcode: switch data.capcode
when 'M' then 'mod'
when 'A' then 'admin'
when 'D' then 'developer'
tripcode: data.trip
uniqueID: data.poster_hash
email: if data.email then encodeURI data.email else ''
subject: data.title_processed
email: data.email or ''
subject: data.title
flagCode: data.poster_country
flagName: data.poster_country_name_processed
flagName: data.poster_country_name
date: data.fourchan_date
dateUTC: data.timestamp
comment: comment
h_comment: h_comment
# file
if data.media?.media_filename
o.file =
name: data.media.media_filename_processed
name: data.media.media_filename
timestamp: data.media.media_orig
url: data.media.media_link or data.media.remote_media_link
height: data.media.media_h
@ -223,7 +223,7 @@ Get =
'[/b]': '</b>'
'[spoiler]': '<s>'
'[/spoiler]': '</s>'
'[code]': '<pre class=prettyprint>'
'[code]': '<pre class="prettyprint">'
'[/code]': '</pre>'
'[moot]': '<div style="padding:5px;margin-left:.5em;border-color:#faa;border:2px dashed rgba(255,0,0,.1);border-radius:2px">'
'[/moot]': '</div>'

View File

@ -417,7 +417,7 @@ Settings =
dimensions: '1280x720'
isImage: true
isSpoiler: true
@nextElementSibling.innerHTML = FileInfo.format @value, data
@nextElementSibling.innerHTML = FileInfo.h_format @value, data
favicon: ->
Favicon.switch()
Unread.update() if g.VIEW is 'thread' and Conf['Unread Favicon']

View File

@ -1,36 +1,26 @@
"""#{if isOP then '' else "<div class=sideArrows id=sa#{postID}>&gt;&gt;</div>"}
<div id=p#{postID} class='post #{if isOP then 'op' else 'reply'}#{
if capcodeIcon is 'admin_highlight' then
' highlightPost'
else
''
}'>
"""#{h_sideArrows}
<div id='p#{+postID}' class='#{h_postClass}'>
#{if isOP then fileHTML else ''}
#{if isOP then h_file else ''}
<div class='postInfo' id=pi#{postID}>
<input type=checkbox name=#{postID} value=delete>
#{' '}<span class=subject>#{subject or ''}</span>#{' '}
<span class='nameBlock#{capcodeClass}'>
#{emailStart}
<span class=name>#{name or ''}</span>
#{tripcode + capcodeStart + emailEnd + capcodeIcon + userID + flag}
</span>#{" "}
<span class=dateTime data-utc=#{dateUTC}>#{date}</span>#{' '}
<div class='postInfo' id='pi#{+postID}'>
<input type='checkbox' name='#{+postID}' value='delete'>
#{' '}<span class='subject'>#{E subject}</span>#{' '}
<span class='nameBlock#{h_capcodeClass}'>
#{h_emailStart}
<span class='name'>#{E name}</span>
#{h_tripcode}#{h_capcodeStart}#{h_emailEnd}#{h_capcodeIcon}#{h_userID}#{h_flag}
</span>#{' '}
<span class='dateTime' data-utc='#{+dateUTC}'>#{E date}</span>#{' '}
<span class='postNum'>
<a href=#{"/#{boardID}/thread/#{threadID}#p#{postID}"} title='Link to this post'>No.</a>
<a href='#{
if g.VIEW is 'thread' and g.THREADID is +threadID then
"javascript:quote(#{postID})"
else
"/#{boardID}/thread/#{threadID}#q#{postID}"
}' title='Reply to this post'>#{postID}</a>
#{pageIcon + sticky + closed + replyLink}
<a href='/#{E boardID}/thread/#{+threadID}\#p#{+postID}' title='Link to this post'>No.</a>
<a href='#{h_quoteLink}' title='Reply to this post'>#{+postID}</a>
#{h_pageIcon}#{h_sticky}#{h_closed}#{h_replyLink}
</span>
</div>
#{if isOP then '' else fileHTML}
#{if isOP then '' else h_file}
<blockquote class=postMessage id=m#{postID}>#{comment or ''}</blockquote>#{' '}
<blockquote class='postMessage' id='m#{+postID}'>#{h_comment}</blockquote>#{' '}
</div>"""

View File

@ -7,39 +7,29 @@ FileInfo =
cb: @node
node: ->
return if !@file or @isClone
@file.text.innerHTML = "<span class=file-info>#{FileInfo.format Conf['fileInfo'], @}</span>"
format: (formatString, post) ->
@file.text.innerHTML = "<span class='file-info'>#{FileInfo.h_format Conf['fileInfo'], @}</span>"
h_format: (formatString, post) ->
formatString.replace /%([A-Za-z])|[^%]+/g, (s, c) ->
if c of FileInfo.formatters
FileInfo.formatters[c].call(post)
if c of FileInfo.h_formatters
FileInfo.h_formatters[c].call(post)
else
Build.escape s
convertUnit: (size, unit) ->
if unit is 'B'
return "#{size.toFixed()} Bytes"
i = 1 + ['KB', 'MB'].indexOf unit
size /= 1024 while i--
size = if unit is 'MB'
Math.round(size * 100) / 100
else
size.toFixed()
"#{size} #{unit}"
formatters:
t: -> Build.escape @file.URL.match(/\d+\..+$/)[0]
T: -> "<a href=#{Build.escape @file.URL} target=_blank>#{FileInfo.formatters.t.call @}</a>"
l: -> "<a href=#{Build.escape @file.URL} target=_blank>#{FileInfo.formatters.n.call @}</a>"
L: -> "<a href=#{Build.escape @file.URL} target=_blank>#{FileInfo.formatters.N.call @}</a>"
Build.h_escape s
h_formatters:
t: -> Build.h_escape @file.URL.match(/\d+\..+$/)[0]
T: -> "<a href='#{Build.h_escape @file.URL}' target='_blank'>#{FileInfo.h_formatters.t.call @}</a>"
l: -> "<a href='#{Build.h_escape @file.URL}' target='_blank'>#{FileInfo.h_formatters.n.call @}</a>"
L: -> "<a href='#{Build.h_escape @file.URL}' target='_blank'>#{FileInfo.h_formatters.N.call @}</a>"
n: ->
fullname = @file.name
shortname = Build.shortFilename @file.name, @isReply
if fullname is shortname
Build.escape fullname
Build.h_escape fullname
else
"<span class=fntrunc>#{Build.escape shortname}</span><span class=fnfull>#{Build.escape fullname}</span>"
N: -> Build.escape @file.name
"<span class='fntrunc'>#{Build.h_escape shortname}</span><span class='fnfull'>#{Build.h_escape fullname}</span>"
N: -> Build.h_escape @file.name
p: -> if @file.isSpoiler then 'Spoiler, ' else ''
s: -> Build.escape @file.size
B: -> FileInfo.convertUnit @file.sizeInBytes, 'B'
K: -> FileInfo.convertUnit @file.sizeInBytes, 'KB'
M: -> FileInfo.convertUnit @file.sizeInBytes, 'MB'
r: -> Build.escape (@file.dimensions or 'PDF')
s: -> Build.h_escape @file.size
B: -> return "#{+@file.sizeInBytes} Bytes"
K: -> "#{+Math.round(@file.sizeInBytes/1024)} KB"
M: -> "#{+Math.round(@file.sizeInBytes/1048576*100)/100} MB"
r: -> Build.h_escape (@file.dimensions or 'PDF')