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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

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

Ähnlich wie The Multipack Presents: "Wrestling With Asp.Net And Web Standards" by Anthony Williams (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

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