The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams

Wrestling with
ASP.NET and Web
Standards
Anthony Williams

Image: c http://www.ﬂickr.com/photos/kenmccown/220565863

Work for a Car Dealer
Group
Image: © Listers Group. Used with permission.

IW
ork
He
re

Work for a Car Dealer
Group
Image: © Listers Group. Used with permission.

NOT a used car salesman

Image: © http://www.bbc.co.uk/comedy/fastshow/wallpaper/images/swiss_1024.jpg

Windows
IIS
SQL Server
ASP.NET
Image: © Microsoft

ASP ≠ ASP.NET

Image: c http://www.ﬂickr.com/photos/planettelex/826864344

Web Standards
+
ASP.NET

Image: c http://www.ﬂickr.com/photos/wheatﬁelds/515063339

Before we start...

Image: c http://www.ﬂickr.com/photos/paix_et_amour/2398468615

★ .NET 3.5
★ C#
★ XHTML 1.0 Transitional

Image: c http://www.ﬂickr.com/photos/paix_et_amour/2398468615

1

Out of the box

Image: c http://www.ﬂickr.com/photos/z287marc/3189567558

<%@ Page Language="C#" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1‐transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

XHTML
Conformance

Image: c http://www.ﬂickr.com/photos/mikahiironniemi/76988191

<system.web>
<XhtmlConformance mode="Transitional" />
</system.web>

<system.web>
<XhtmlConformance mode="Strict" />
mode="Strict"
</system.web>

<system.web>
<XhtmlConformance mode="Strict" />
</system.web>


<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐
strict.dtd">

    <title></title>
</head>
<body>
    <div>

    </div>
    </form>
</body>
</html>


strict.dtd">

    <title></title>
</head>
<body>
    <div>

    </div>
    </form>
</body>
</html>

strict.dtd">

<head><title>

</title></head>
<body>
<div>
</div>
    <div>

    </div>
    </form>
</body>
</html>

strict.dtd">

<head><title>

</title></head>
<body>
Won’t Validate
<div>
</div>
    <div>

    </div>
    </form>
</body>
</html>

strict.dtd">

<head><title>

</title></head>
<body>
    <form method="post" action="Default.aspx" id="form1">
<div>
</div>
    <div>

    </div>
    </form>
</body>
</html>

<system.web>
<XhtmlConformance mode="Legacy" />
mode="Legacy"
</system.web>

<system.web>
<XhtmlConformance mode="Legacy" />
</system.web>

2

<asp:repeater />

Image: c http://www.ﬂickr.com/photos/beatxm/2535486395

<asp:repeater id="rptNavigationLinks" runat="server">
    <headertemplate>
        <ul id="MainNavigation">
    </headertemplate>
    <itemtemplate>
            <li <%# Eval("Link", "class="{0}"") %>>
                <a href="<%# Eval("LinkUrl") %>"><% Eval("LinkTitle") %></a>
            </li>
    </itemtemplate>
    <footertemplate>
        </ul>
    </footertemplate>
</asp:repeater>

<ul id="MainNavigation">
    <li class="Home">
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/New">New Cars</a>
    </li>
    <li>
        <a href="/Used">Used Cars</a>
    </li>
    <li>
        <a href="/Jobs">Jobs</a>
    </li>
    <li>
        <a href="/About">About Us</a>
    </li>
</ul>

<asp:repeater id="rptNavigationLinks" runat="server">
    <headertemplate>
        <table id="DataTable">
            <thead>
                <tr>
                    <th> ... </th>
                    <th> ... </th>
                </tr>
            </thead>
            <tbody>
    </headertemplate>
    <itemtemplate>
                <tr>
                    <td> ... </td>
                    <td> ... </td>
                </tr>
    </itemtemplate>
    <footertemplate>
            </tbody>
        </table>
    </footertemplate>
</asp:repeater>

<table id="DataTable">
    <thead>
        <tr>
            <th>Letter</th>
            <th>Phonetic</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>Alpha</td>
        </tr>
        <tr>
            <td>B</td>
            <td>Bravo</td>
        </tr>
        <tr>
            <td>C</td>
            <td>Charlie</td>
        </tr>
    </tbody>
</table>

3

runat="server"

Image: http://users.upwardaccess.com/plong/images/btvserver_treadmill.jpg

visible="false"

Image: c http://www.ﬂickr.com/photos/antonystanley/3093398360

Image: c http://www.ﬂickr.com/photos/antonystanley/3093398360

4

Blank Alt Text

Image: c http://www.ﬂickr.com/photos/wolfsoul/1368661325

<asp:image runat="server" id="Image1"
imageurl="~/accept.png" />

style="border‐width:0px;"

imageurl="~/accept.png"
alternatetext="" />

alt="" />

      alternatetext=""
      generateemptyalternatetext="true" />

      alternatetext=""
      generateemptyalternatetext="true" />
generateemptyalternatetext="true"

style="border‐width:0px;" alt="" />
alt="" />

style="border‐width:0px;" alt="" />

<!‐‐ Original HTML ‐‐>
<img id="Image1" src="accept.png" />


// Add this to your code‐behind (C#)
Image1.Attributes.Add("alt", "");


// Add this to your code‐behind (C#)
Image1.Attributes.Add("alt", "");

<!‐‐ HTML after additional code‐behind ‐‐>
<img id="Image1" src="accept.png" alt="" />

// You’ll need .NET 3.0 (but seriously, use 3.5) for this to work, as well as needing to import
// (using) the System.Linq and System.Collections.Generic namespaces in all code files that use this.

// Put the ControlHelper class somewhere in your solution ‐ not necessarily your page:
public static class ControlHelper
{
      public static IEnumerable<Control> AllControls(this ControlCollection Controls)
      {
            foreach (Control CurrentControl in Controls)
            {
                  foreach(var ChildControls in CurrentControl.Controls.AllControls())
                  {
                        yield return ChildControls;
                  }
                  yield return CurrentControl;
            }
      }
}

// Then run this code in your pages that have img elements with runat="server" attributes:
IEnumerable<HtmlImage> ImageControls =
      Page.Controls
          .AllControls()
          .OfType<HtmlImage>()
          .Where(r => r.Attributes["alt"] == null);

foreach (HtmlImage ImageControl in ImageControls) ImageControl.Attributes.Add("alt", "");

5

Dealing with
Submissions

Image: c http://www.ﬂickr.com/photos/barnett/2836828090

Content Editors

Image: c http://www.ﬂickr.com/photos/kristiand/3223920178

Sanitise user input

Image: c http://www.ﬂickr.com/photos/herrolm/2699835587

Sanitise user input
c http://xkcd.com/327/


Exception Details: System.Web.HttpRequestValidationException


!"#$%&'($)&*+,&-(.(/0(1-234&*1(3$"5


!"#"$%&'(%)*
++++++!,-.%"+/-012-$%3%45%"$678-0"%7+9*
!9"#"$%&'(%)*


Server.HtmlEncode


Server.HtmlEncode
String.Replace()


Server.HtmlEncode
String.Replace()
Regular Expressions


<h1>I can’t be bothered</h1>
<p>I’ve had enough. Balls to this.</p>
<p>Time to play havoc with the website:</p>
<style>
    * {
        display: none !important;
    }
</style>
<p>Have fun!</p>
<script type="text/javascript">
    alert("I wonder what's happened to the website? Tee‐hee.");
</script>

<((script|style|iframe|object|embed)b[^>]*)>(.*?)</2>

// Create a string loaded with our HTML
String InputHtml = " ... ";

// Create a new regular expression, and make sure you treat the
// entire input as a single line, so that you match n in your
// dot (.) matches.
Regex re = new Regex(
@"<((script|style|iframe|object|embed)b[^>]*)>(.*?)</2>",
RegexOptions.Singleline
);

// Create a new string which replaces any instance of ‘naughty’
// code with a blank string.
String OutputHtml = re.Replace(InputHtml, String.Empty);

<h1>I can’t be bothered</h1>
<p>I’ve had enough. Balls to this.</p>
<p>Time to play havoc with the website:</p>

<p>Have fun!</p>

Validating (X)HTML

Image: http://www.aharef.info/static/htmlgraph/?url=http://listersgroup.co.uk

Ampersands

Image: c http://www.ﬂickr.com/photos/mattwright/237415989

Render it Yourself

Image: c http://www.ﬂickr.com/photos/brullonulla/2971684462

&(?!(?:[a‐zA‐Z][a‐zA‐Z0‐9]*|#d+);)(?!(?>(?:(?!<![CDATA[|]]>).)*)]]>)

public override void Render(HtmlTextWriter writer)
{
    using (HtmlTextWriter HtmlWriter = new HtmlTextWriter(new System.IO.StringWriter()))
    {
        base.Render(HtmlWriter);
        string Html = HtmlWriter.InnerWriter.ToString();

        // Create the regular expression to find the un‐encoded ampersands...
        Regex re = new Regex(
            @"&(?!(?:[a‐zA‐Z][a‐zA‐Z0‐9]*|#d+);)(?!(?>(?:(?!<![CDATA[|]]>).)*)]]>)",
            RegexOptions.Multiline | RegexOptions.IgnoreCase
        );

        // Use it to replace them with encoded ampersands (&)
        Html = re.Replace("&");

        // Send the HTML to the browser
        HtmlWriter.Write(Html);
    }
}

<p>Some HTML that will include some encoded ampersands & like
that one, some double encoded ampersands like this one &amp;
and some unencoded ampersands, like this one & and this one &.
Unfortunately& this &ampersand here could actually mean something
else.</p>

    // <![CDATA[
        if (a && b) doSomething("a & b & c");
    // ]]>
</script>

<p>Some HTML that will include some encoded ampersands & like
that one, some double encoded ampersands like this one &amp;
and some unencoded ampersands, like this one & and this one
&. Unfortunately& this &ampersand here could actually
mean something else.</p>

    // <![CDATA[
        if (a && b) doSomething("a & b & c");
    // ]]>
</script>

★ Standards out of the box
★ Use the repeater control
★ Use HTML controls (runat=”server”)
★ Fix ASP.NET’s handling of alt=””
★ Be careful with user submissions

Image: c http://www.ﬂickr.com/photos/runneralan/3091055611

Questions?
Image: c http://www.ﬂickr.com/photos/seandreilinger/2326448445

Slides:
http://slideshare.net/
abitgone

Image: c http://www.ﬂickr.com/photos/videocrab/116136642

Videos:
vimeo.com/channels/
multipackpresents

Image: c http://www.ﬂickr.com/photos/videocrab/116136642

Thank you!
Twitter:
@abitgone
Web:
abitgone.co.uk
Email/Jabber:
anthony@abitgone.co.uk

The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (20)

Similar a The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams

Similar a The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams (20)

Último

Último (20)

The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams