CODEWITHSUNDEEP
webhttp-headerswebserver
Chaitanya
Chaitanya

Reputation: 3479

http response regarding content-type

HTTP/1.1 200 OK
Content-Type:text/html

<html><body><img src=\"http://localhost:5000/twitter.png\" alt=\"Smiley face\" height=\"256\" width=\"256\"/></body></html>

Here in this http response example if I change

Content-Type:image/*

Everything else is just the same. Then what kind of difference does it make ? When I tested with my simple test web server which I wrote:

In the first case - the exact html was being received by the browser, but the image was not getting displayed. A small image with a triangle, circle embedded in a rectangle was coming.

In the second case with content-type: image/* the image requested was getting downloaded but image could not be opened.

For example if

Content-Type = image/png

the image was not getting downloaded but html perceived by browser was getting changed like

 <html>
 <body style="margin: 0px;">
 <img style="-web-user-select: none" src="http://localhost:5000"/>
 </body>
 </html>

My question is how to use these content types?

Http Response: 

 HTTP/1.1 200 OK
 Content-Type:image/png
 Content-Lenth:27892
 Server:Learnee

 \211PNG

g9\357ax\257a>\307\365\333\324\3658\313
\234H\245\374\215\321\371\373\317\302Rh \364\263K\353\273\362\312+\243\200\\321\376\217\337\360u)\373X\355q*1\267\235\342;I\316\341\265\310\317I:q\332\325\317{0\245T\334^WH#l  s\200\231\2422\252q>;\346\312d\252X\201\365\312\304%:\216H\316\306\372{\323axDB\215\3178Y\345\254*\245\366R\357a\235    җ\2148\252D\236S\232\231\370z\342w\337\375V\265Z\315c/:,d\311<շ\367D1\356\337\326֖\373\242\263t\351\325\377IRmo\264R\376S\200\352_\276\242K7\214\263\333{\230\267횥\313qc\317\347S\3022<ه\202\273ڟ\203l\310\344\216\356M\322Я\225\240\300=N1\277\271\355\327ߺtv̀ٙ\231\231\374\226-[\204~\265U\341\220OO\344\211q\316\257\246\276\345&\354\352\227\325!\274<\264\233\234\352p\263\301\3237\275\334و\203]\2712\371\332\306I\222\207\233\341獶\215\257&7Y7 K\302u@\373\235\370   0\275\373ؾ$\235B$z?\200zD\343yǯܓ\356\241BW\327\320m\214\337\301f\327@\300a\201\262C\257\244\216p\366\330\220\325\301@\215\332G/-\320Ԃ\267\246X%\344ȔD\216N{\277Q\277\3361M\276\264~/i\213\3529D\320@`\307\314N@=\334\316\200\272\300)\367}?<L\233D\372\227\275-[$\375\330.\222\257T\351\313em\377\263q]:\307@p%Xӭ\204\222\365>8K\266ga\200@
H3\352Z3\200R\320\347SU\301
G>\323!\307tD\200\205{~\370\3524\371鶌>S\220\263D5\224(@\214SN\221{\264L@f\216%\247\200  \360\3455\376Y`\341s\263U2YR\214p\363\320pA[?\237A\270@\357\214\221\273x!\240*\327o\231"\367\215\314\325&E\321Su \220)\200\243\261\363@\200\335a\265\337.\242~Y\300\242d\214f\232\262\231\275E\370㣫W\257\216%\223\3114(~
+=\261\347EP|\264\377G\200L\213řB\241\220۴iS\371\251\247\236r\360OD\231\371G\376a\354tt
\364~6\217\3471\364'

Code for fetching data from file: 

bool ServerFileSystem::getDataFromFile(std::string urlPath, std::string& chunkData)
{
std::stringstream stream;
std::cout << urlPath << std::endl;

if(!strcmp(urlPath.c_str(), "/"))
{
    urlPath = urlPath + "index.html";
    std::cout << "URL Path: " << urlPath;
}

std::string localPath = SERVER_ROOT + urlPath;
std::ifstream file(localPath.c_str());

file.seekg(0, std::ifstream::beg);

while(file.tellg() != -1)
{
    char *p = new char[1024];

    bzero(p, 1024);
    file.read(p, 1024);

    stream << p;
    stream.flush();

    delete p;
}

chunkData = stream.str();

file.close();

return true;
}

I am getting the whole data in the form of string and appending headers necessary. So, the final response which I am sending is the one shown above the code.

Upvotes: 2

Views: 20142

Answers (1)

CodeCaster
CodeCaster

Reputation: 151720

HTTP/1.1 200 OK
Content-Type:text/html

<html>[...]</html>

If I change [the Content-Type-header] to Content-Type:image/*, everything else is just the same. Then what kind of difference does it make ?

You're in luck: your browser adheres to the robustness principle. It could say: "I don't know what you're trying to do, but I'm not going to render HTML as an image. I think I'll just issue a "Cannot display page" error".

Instead it goes: "Wait, the content does look like HTML, why not give it a try?".

You will want to serve your HTML as such, and the same goes for images: serve them with the appropriate image MIME type.

See also:

RFC 2045, section 5:

The purpose of the Content-Type field is to describe the data contained in the body fully enough that the receiving user agent can pick an appropriate agent or mechanism to present the data to the user, or otherwise deal with the data in an appropriate manner. The value in this field is called a media type.

Upvotes: 2

Related Questions