¿Cómo puedo escapar de las comillas en los valores de atributo HTML?

los escape() La función tiene la ventaja de que hace no inserte cualquier referencia de carácter HTML / XML, el resultado será interpretado primero por Javascript y mantendrá más tarde en tiempo de ejecución la longitud exacta de la cadena cuando la cadena resultante sea evaluada por el motor javascript. Te ahorra tener que administrar contexto mixto a lo largo de su código de aplicación (consulte la sección final sobre ellos y sobre las consideraciones de seguridad relacionadas). En particular porque si usa quoteattr() en este contexto, el javascript evaluado y ejecutado posteriormente tendría que manejar explícitamente referencias de caracteres para redecodificarlas, algo que no sería apropiado. Los casos de uso incluyen:

1. cuando la cadena reemplazada se insertará en un controlador de eventos javascript generado rodeado por algún otro código HTML donde el fragmento javascript contendrá atributos rodeados de comillas literales).
2. cuando la cadena reemplazada será parte de un parámetro settimeout () que luego será eval () ed por el motor Javascript.

Ejemplo 1 (generar solo JavaScript, no generar contenido HTML):

var title = "It's a "title"!";
var msg   = "Both strings contain "quotes" & 'apostrophes'...";
setTimeout(
    '__forceCloseDialog("myDialog", "' +
        escape(title) + '", "' +
        escape(msg) + '")',
    2000);

Ejemplo 2 (generar HTML válido):

var msg =
    "It's just a "sample" .ntTry & see yourself!";
/* This is similar to the above, but this JavaScript code will be reinserted below: */ 
var scriptCode =
    'alert("' +
    escape(msg) + /* important here!, because part of a JS string literal */
    '");';

/* First case (simple when inserting in a text element): */
document.write(
    '');

/* Second case (more complex when inserting in an HTML attribute value): */
document.write(
    'Click here !');

En este segundo ejemplo, verá que ambas funciones de codificación son simultaneamente usado en la parte del texto generado que está incrustado en literales JavasSript (usando escape()), con el código JavaScript generado (que contiene el literal de cadena generado) se incrusta de nuevo y se vuelve a codificar usando quoteattr(), porque ese código JavaScript se inserta en un atributo HTML (en el segundo caso).

3. Consideraciones generales para la codificación segura de textos para incrustarlos en contextos sintácticos:

Entonces, en resumen,

• los quotattr() La función debe usarse al generar el contenido de un Literal de atributo HTML / XML, donde se agregan las comillas circundantes externamente dentro de una concatenación para producir un código HTML / XML completo.
• los escape() La función debe utilizarse al generar el contenido de una Literal constante de cadena de JavaScript, donde se agregan las comillas circundantes externamente dentro de una concatenación para producir un código HTML / XML completo.
• Si se usa con cuidado, y En todas partes encontrará contenidos variables para insertar de forma segura en otro contexto, y solo bajo estas reglas (con las funciones implementadas exactamente como arriba, que se encarga de los “caracteres especiales” utilizados en ambos contextos), puede mezclar ambos a través del escape múltiple y la transformación seguirá siendo seguro y no requerirá código adicional para decodificarlos en la aplicación usando esos literales. Hacer no utilizar estas funciones.

Esas funciones solo son seguras en esos contextos estrictos (es decir, solamente Valores de atributo HTML / XML para quoteattr(), y solamente Literales de cadena de JavaScript para escape()).

Hay otros contextos que utilizan diferentes mecanismos de cita y escape (por ejemplo, literales de cadena SQL o literales de cadena de Visual Basic, o literales de expresión regular, o campos de texto de archivos de datos CSV o valores de encabezado MIME), que cada requieren su propio función de escape distinta utilizada solamente en estos contextos:

• Nunca asumas eso quoteattr() o escape() será seguro o no alterará la semántica de la cadena de escape, antes de verificar primero, que la sintaxis de (respectivamente) valores de atributo HTML / XML o letras de cadenas de JavaScript se entenderá y admitirá de forma nativa en esos contextos.
• Por ejemplo, la sintaxis de los literales de cadena Javascript generados por escape() también es apropiado y soportado de forma nativa en los otros dos contextos de cadenas literales utilizadas en el código fuente de programación Java, o valores de texto en datos JSON.

Pero lo contrario es no siempre cierto. Por ejemplo:

• La interpretación de los literales de escape codificados generados inicialmente para otros contextos distintos de los literales de cadena de Javascript (incluidos, por ejemplo, los literales de cadena en el código fuente PHP), no siempre es seguro para el uso directo como literales de Javascript. a través del javascript eval() función del sistema para decodificar los literales de cadena generados que no se escaparon usando escape(), debido a que esos otros literales de cadena pueden contener otros caracteres especiales generados específicamente para esos otros contextos iniciales, que Javascript interpretará incorrectamente, esto podría incluir escapes adicionales como “Uxxxxxxxx“, o “e“, o “$var” y “$$“, o la inclusión de operadores de concatenación adicionales como ' + " que cambia el estilo de las comillas o los delimitadores “transparentes”, como “” o “<[DATA[" and "]]>"(que se puede encontrar y ser seguro dentro de un contexto complejo solo diferente que admite múltiples sintaxis de escape: consulte a continuación el último párrafo de esta sección sobre contextos mixtos).
• Lo mismo se aplicará a la interpretación / decodificación de literales de escape codificados que se generaron inicialmente para otros contextos en los que HTML / XML atribuye valores en documentos creados utilizando su representación textual estándar (por ejemplo, tratando de interpretar los literales de cadena que se generaron para incrustar en una representación de formato binario no estándar de documentos HTML / XML!)
• Esto también se aplicará a la interpretación / decodificación con la función javascript. eval() de literales de cadena que solo se generaron de manera segura para su inclusión en literales de atributo HTML / XML utilizando quotteattr(), que lo hará no estar seguro, porque los contextos se han mezclado incorrectamente.
• Esto también se aplicará a la interpretación / decodificación con un analizador de documentos de texto HTML / XML de literales de valor de atributo que solo se generaron de manera segura para su inclusión en una cadena literal de Javascript usando escape(), que lo hará no estar seguro, porque los contextos también se han mezclado incorrectamente.

4. Decodificación segura del valor de literales sintácticos incrustados:

Si quieres decodificar o interpretar literales de cadena en contextos fueron los resultados decodificados valores de cadena se utilizará indistintamente y sin distinción sin cambios en otro contexto, así llamado contextos mixtos (incluyendo, por ejemplo: nombrar algunos identificadores en HTML / XML con cadenas literales inicialmente codificadas con quotteattr(); nombrar algunas variables de programación para Javascript a partir de cadenas inicialmente codificadas de forma segura con escape(); y así sucesivamente ...), deberá preparar y usar una nueva función de escape (que también verificará la validez del valor de la cadena antes de codificarlo, o rechazarlo, o truncarlo / simplificarlo / filtrarlo), también como una nueva función de decodificación (que también evitará cuidadosamente la interpretación de secuencias válidas pero inseguras, solo aceptadas internamente pero no aceptable para fuentes externas inseguras, lo que también significa que la función de decodificación como eval() en javascript debe evite absolutamente la decodificación de fuentes de datos JSON, para lo cual deberá utilizar un decodificador JSON nativo más seguro; un decodificador JSON nativo no interpretará secuencias JavaScript válidas, como la inclusión de delimitadores entre comillas en la expresión literal, operadores o secuencias como "$var"), para reforzar la seguridad de dicho mapeo.

Estas últimas consideraciones sobre la decodificación de literales en contextos mixtos, que solo fueron codificados de manera segura con cualquier sintaxis para que el transporte de datos sea seguro solo en un contexto único más restrictivo, es absolutamente crítico para la seguridad de su aplicación o servicio web. Nunca mezcle esos contextos entre el lugar de codificación y el lugar de decodificación, si esos lugares no pertenecen al mismo ámbito de la seguridad (pero incluso en ese caso, el uso de contextos mixtos siempre es muy peligroso, es muy difícil rastrear con precisión en su código.

Por eso te recomiendo Nunca usar o asumir contextos mixtos en cualquier lugar de su aplicación: en su lugar, escriba una función de codificación y decodificación segura para un único contexto precide que tenga reglas precisas de longitud y validez en los valores de cadena decodificados, y reglas precisas de longitud y validez en los literales de cadena de cadena codificados. Prohibir esos contextos mixtos: para cada cambio de contexto, use otro par de funciones de codificación / decodificación coincidentes (la función que se use en este par depende de qué contexto está incrustado en el otro contexto; y el par de funciones de coincidencia también es específico para cada par de contextos).

Esto significa que:

• Para decodificar de forma segura un literal de valor de atributo HTML / XML que se ha codificado inicialmente con quoteattr(), debe '' 'no' '' asumir que se ha codificado utilizando otras entidades nombradas cuyo valor dependerá de una DTD específica que lo defina. usted debe en su lugar, inicialice el analizador HTML / XML para admitir solamente las pocas entidades de carácter con nombre predeterminado generadas por quoteattr() y opcionalmente las entidades de caracteres numéricos (que también son seguras en tal contexto: el quoteattr() La función solo genera algunos de ellos, pero podría generar más de estas referencias de caracteres numéricos, pero no debe generar otras entidades de carácter con nombre que no están predefinidas en la DTD predeterminada). Todos otras entidades nombradas debe ser rechazado por su analizador, ya que no es válido en la cadena de origen literal para decodificar. Alternativamente, obtendrá un mejor rendimiento definiendo un unquoteattr función (que rechazará cualquier presencia de comillas literales dentro de la cadena de origen, así como entidades con nombre no admitidas).
• Para decodificar de forma segura un literal de cadena Javascript (o literal de cadena JSON) que se ha codificado inicialmente con escape(), usted debe utilizar el JavaScript seguro unescape() función, pero no el Javascript inseguro eval() ¡función!

A continuación se muestran ejemplos de estas dos funciones de decodificación segura asociadas.

5. El unquoteattr() función para analizar texto incrustado en elementos de texto HTML / XML o valores de atributo literales:

function unquoteattr(s) 
    /*
    Note: this can be implemented more efficiently by a loop searching for
    ampersands, from start to end of ssource string, and parsing the
    character(s) found immediately after after the ampersand.
    */
    s = ('' + s); /* Forces the conversion to string type. */
    /*
    You may optionally start by detecting CDATA sections (like
    `') /* The 4 other predefined entities required. */
        .replace(/</g, '<')
        .replace(/"/g, '"')
        .replace(/'/g, "'")
        ;
    /*
    You may add other replacements here for predefined HTML entities only 
    (but it's not necessary). Or for XML, only if the named entities are
    defined in *your* assumed DTD.
    But you can add these replacements only if these entities will *not* 
    be replaced by a string value containing *any* ampersand character.
    Do not decode the '&' sequence here !

    If you choose to support more numeric character entities, their
    decoded numeric value *must* be assigned characters or unassigned
    Unicode code points, but *not* surrogates or assigned non-characters,
    and *not* most C0 and C1 controls (except a few ones that are valid
    in HTML/XML text elements and attribute values: TAB, LF, CR, and
    NL='x85').

    If you find valid Unicode code points that are invalid characters
    for XML/HTML, this function *must* reject the source string as
    invalid and throw an exception.

    In addition, the four possible representations of newlines (CR, LF,
    CR+LF, or NL) *must* be decoded only as if they were 'n' (U+000A).

    See the XML/HTML reference specifications !
    */
    /* Required check for security! */
    var found = /&[^;]*;?/.match(s);
    if (found.length >0 && found[0] != '&')
        throw 'unsafe entity found in the attribute literal content';
     /* This MUST be the last replacement. */
    s = s.replace(/&/g, '&');
    /*
    The loop needed to support CDATA sections will end here.
    This is where you'll concatenate the replaced sections (CDATA or
    not), if you have splitted the source string to detect and support
    these CDATA sections.

    Note that all backslashes found in CDATA sections do NOT have the
    semantic of escapes, and are *safe*.

    On the opposite, CDATA sections not properly terminated by a
    matching `]]>` section terminator are *unsafe*, and must be rejected
    before reaching this final point.
    */
    return s;

Tenga en cuenta que esta función no no analizar los delimitadores de comillas circundantes que se utilizan para rodear valores de atributos HTML. De hecho, esta función también puede decodificar cualquier contenido de elemento de texto HTML / XML, posiblemente conteniendo comillas literales, que son a salvo. Es su responsabilidad analizar el código HTML para extraer las cadenas entre comillas utilizadas en los atributos HTML / XML y eliminar los delimitadores de comillas coincidentes antes de llamar al unquoteattr() función.

6. El unescape() función para analizar el contenido de texto incrustado en literales Javascript / JSON:

function unescape(s) 
    /*
    Note: this can be implemented more efficiently by a loop searching for
    backslashes, from start to end of source string, and parsing and
    dispatching the character found immediately after the backslash, if it
    must be followed by additional characters such as an octal or
    hexadecimal 7-bit ASCII-only encoded character, or an hexadecimal Unicode
    encoded valid code point, or a valid pair of hexadecimal UTF-16-encoded
    code units representing a single Unicode code point.

    8-bit encoded code units for non-ASCII characters should not be used, but
    if they are, they should be decoded into a 16-bit code units keeping their
    numeric value, i.e. like the numeric value of an equivalent Unicode
    code point (which means ISO 8859-1, not Windows 1252, including C1 controls).

    Note that Javascript or JSON does NOT require code units to be paired when
    they encode surrogates; and Javascript/JSON will also accept any Unicode
    code point in the valid range representable as UTF-16 pairs, including
    NULL, all controls, and code units assigned to non-characters.
    This means that all code points in U00000000..U0010FFFF are valid,
    as well as all 16-bit code units in u0000..uFFFF, in any order.
    It's up to your application to restrict these valid ranges if needed.
    */
    s = ('' + s) /* Forces the conversion to string. */
    /* Decode by reversing the initial order of replacements */
        .replace(/\x3E/g, '>')
        .replace(/\x3C/g, '<')
        .replace(/\x22/g, '"')
        .replace(/\x27/g, "'")
        .replace(/\x26/g, '&') /* These 5 replacements protect from HTML/XML. */
        .replace(/\u00A0/g, 'u00A0') /* Useful but not absolutely necessary. */
        .replace(/\n/g, 'n')
        .replace(/\t/g, 't') /* These 2 replacements protect whitespaces. */
        ;
    /*
    You may optionally add here support for other numerical or symbolic
    character escapes.
    But you can add these replacements only if these entities will *not* 
    be replaced by a string value containing *any* backslash character.
    Do not decode to any doubled backslashes here !
    */
    /* Required check for security! */
    var found = /\[^\])?/.match(s);
    if (found.length > 0 && found[0] != '\\')
        throw 'Unsafe or unsupported escape found in the literal string content';
    /* This MUST be the last replacement. */
    return s.replace(/\\/g, '\');

Tenga en cuenta que esta función no no Analice los delimitadores de comillas circundantes que se utilizan para rodear los literales de cadenas de JavaScript o JSON. Es su responsabilidad analizar el código fuente de Javascript o JSON para extraer los literales de cadenas entre comillas y eliminar los delimitadores de comillas coincidentes antes de llamar al unescape() función.

Solo necesitas intercambiar cualquier ' caracteres con el código de carácter de entidad HTML equivalente:

data.name.replace(/'/g, "'");

Alternativamente, puede crear todo utilizando los métodos de manipulación DOM de jQuery:

var row = $("").append("Name");
$("",  value: data.name ).appendTo(row.children("td:eq(1)"));

" = " or "

' = '

Ejemplos:

var s = "Tim "The Toolman" Taylor";
var s = 'Tim 'The Toolman' Taylor';

function escapeAttrNodeValue(value) (")